这篇文章将为大家详细讲解有关微信小程序实现顶部选项卡的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

微信小程序顶部选项卡效果图：

下面直接上代码:

wxml:

<!--pages/index/index.wxml--><viewclass="swiper-tab"><viewclass="tab-item{{currentTab==0&#63;'on':''}}"data-current="0"bindtap="swichNav">选项一</view><viewclass="tab-item{{currentTab==1&#63;'on':''}}"data-current="1"bindtap="swichNav">选项二</view><viewclass="tab-item{{currentTab==2&#63;'on':''}}"data-current="2"bindtap="swichNav">选项三</view></view><swipercurrent="{{currentTab}}"class="swiper"duration="300"bindchange="bindChange"><swiper-item><view>页面一</view></swiper-item><swiper-item><view>页面二</view></swiper-item><swiper-item><view>页面三</view></swiper-item></swiper>

wxss:

/*pages/index/index.wxss*/.swiper-tab{width:100%;text-align:center;line-height:80rpx;border-bottom:1pxsolid#000;display:flex;flex-direction:row;justify-content:center;}.tab-item{flex:1;font-size:30rpx;display:inline-block;color:#777777;}.on{color:red;border-bottom:5rpxsolidred;}.swiper{display:block;height:100%;width:100%;overflow:hidden;}.swiperview{text-align:center;padding-top:100rpx;}

js:

//pages/index/index.jsPage({/***页面的初始数据*/data:{winWidth:0,winHeight:0,currentTab:0},/***生命周期函数--监听页面加载*/onLoad:function(options){varthat=this;/***获取系统信息*/wx.getSystemInfo({success:function(res){that.setData({winWidth:res.windowWidth,winHeight:res.windowHeight});}});},bindChange:function(e){varthat=this;that.setData({currentTab:e.detail.current});},swichNav:function(e){varthat=this;if(this.data.currentTab===e.target.dataset.current){returnfalse;}else{that.setData({currentTab:e.target.dataset.current})}},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})

关于微信小程序实现顶部选项卡的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。