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

本文实例为大家分享了微信小程序实现选项卡的具体代码，供大家参考，具体内容如下

微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。

先看效果图：

test.wxml

<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

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

.swi {
? width: 100%;
? height: 100vh;

}
.swiper-tab{
? width: 100%;
? border-bottom: 2rpx solid #ccc;
? text-align: center;
? height: 88rpx;
? line-height: 88rpx;
? font-weight: bold;
}
.swiper-tab-item{
? display: inline-block;
? width: 33.33%;
? color:red;
}
.active{
? color:aqua;
? border-bottom: 4rpx solid red;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现选项卡的方法的详细内容...