微信小程序如何在 wx：for 中判断页面跳转
696
2023-11-11
微信小程序实现选项卡的方法
本文实例为大家分享了微信小程序实现选项卡的具体代码，供大家参考，具体内容如下
微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。
先看效果图：
test.wxml
?
1
2
3
4
5
6
7
8
9
10
11
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?active:}}" data-current="0" bindtap="clickTab">一</view>
<view class="swiper-tab-item {{currentTab==1?active:}}" data-current="1" bindtap="clickTab">二</view>
<view class="swiper-tab-item {{currentTab==2?active:}}" data-current="2" bindtap="clickTab">三</view>
</view>
<swiper class=swi current="{{currentTab}}" duration="300" bindchange="swiperTab">
<swiper-item><view>第一屏</view></swiper-item>
<swiper-item><view>第二屏</view></swiper-item>
<swiper-item><view>第三屏</view></swiper-item>
</swiper>
test.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var app=getApp()
Page({
data:{
currentTab:0
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
//滑动切换
swiperTab:function( e ){
var that=this;
that.setData({
currentTab:e.detail.current
});
},
//点击切换
clickTab: function( e ) {
var that = this;
if( this.data.currentTab === e.target.dataset.current ) {
return false;
} else {
that.setData( {
currentTab: e.target.dataset.current
})
}
}
})
test.wxss
您可能感兴趣的文章:微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换微信小程序实现选项卡功能微信小程序的tab选项卡的实现效果微信小程序 选项卡的简单实例微信小程序开发之选项卡(窗口底部TabBar)页面切换微信小程序 tabs选项卡效果的实现微信小程序实战之顶部导航栏(选项卡)(1)微信小程序实现顶部选项卡(swiper)微信小程序自定义组件实现tabs选项卡功能微信小程序实现选项卡的简单实例
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~