本文實例為大家分享了微信小程序滑動tab切換展示的具體代碼，供大家參考，具體內容如下
創(chuàng)新互聯(lián)建站長期為千余家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為寧海企業(yè)提供專業(yè)的網站設計、成都做網站，寧海網站改版等技術服務。擁有十多年豐富建站經驗和眾多成功案例,為您定制開發(fā)。
效果預覽:
js部分：
重慶分公司
重慶分公司
Page({
data: {
arr: [1,2,3,4,5,6,7,8],
index: 1
},
onLoad: function (options) {
this.setData({
childW: this.data.arr.length * 80
});
},
tabOn: function (e) {
this.setData({
index: e.currentTarget.dataset.index + 1
});
}
})wxtml部分：
{{ item }} 內容一 內容二 內容三 內容四 內容五 內容六 內容七 內容八
wxss部分：
.tab{
height: 50px;
width: 80px;
display: inline-block;
text-align: center;
line-height: 50px;
}
.tab:nth-child(odd){
background-color: #ccc;
}
.content{
width: 100%;
height: 200px;
text-align: center;
line-height: 200px;
}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
