微信小程序实现选项卡的方法

网友投稿 776 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小时内删除侵权内容。

标签：程序 方法 微信小程序 小程序 js
上一篇:uniapp实现微信H5扫码功能的完整步骤
下一篇:微信小程序实现简单购物车小功能
相关文章

 发表评论

暂时没有评论，来抢沙发吧~