本文实例为大家分享了微信小程序实现tab切换效果的具体代码，供大家参考，具体内容如下
简单介绍一下：顶部导航使用 scroll-view 组件 中间的内容部分使用 swiper 组件
实现的逻辑就是： 先这样在这样，这样然后那样。（此处省略200个字）。
代码如下，复制可用
wxml
js
{
this.setData({
windowHeight: res.windowHeight,windowWidth: res.windowWidth
})
},})
},onReady: function() {
wx.setNavigationBarTitle({ //修改标题文字
title: ''
})
},clickMenu: function(e) {
var current = e.currentTarget.dataset.current //获取当前tab的index
var tabWidth = this.data.windowWidth / 5 // 导航tab共5个，获取一个的宽度
this.setData({
tabScroll: (current - 2) * tabWidth //使点击的tab始终在居中位置
})
if (this.data.currentTab == current) {
return false
} else {
this.setData({currentTab: current })
}
},changeContent: function(e) {
var current = e.detail.current // 获取当前内容所在index,文档有
var tabWidth = this.data.windowWidth / 5
this.setData({
currentTab: current,tabScroll: (current - 2) * tabWidth
})
}
})
css
Box-sizing: border-Box;
overflow: hidden;
line-height: 100rpx;
}
.tab-item{
display: inline-block;
width: 20%;
text-align: center;
font-size: 14px;
color: #8f9193;
}
.active{
color: #ff502c
}
.content{
padding-top: 100rpx;
Box-sizing: border-Box;
text-align: center;
font-size: 14px;
}
.content-item{
overflow-y: scroll
}
