这篇文章主要介绍了微信小程序如何实现选项卡，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联主营长宁网站建设的网络公司,主营网站建设方案,
app软件开发,长宁h5
微信平台小程序开发搭建,长宁网站营销推广欢迎长宁等地区企业咨询
微信小程序之选项卡的实现方法
前言：
从事前端的同学们一定不会对选项卡陌生，不管是自己原生写的，还是各个UI框架里带的，我想大家都使用过很多选项卡，对选项卡的原理也足够清楚了，下面我们来在微信小程序里实现选项卡的功能。
微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。
先看效果图：
实现代码：
页面代码：
一
二
三
第一屏
第二屏
第三屏
js代码：
var app=getApp()
Page({
data:{
currentTab:0
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
//滑动切换
swiperTab:function( e ){
var that=this;
that.setData({
currentTba: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
})
}
}
})css代码：
.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;
}感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序如何实现选项卡”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章名称：微信小程序如何实现选项卡-创新互联
网址分享：
http://bzwzjz.com/article/cohccs.html
