本文实例为大家分享了微信小程序滑动tab切换展示的具体代码,供大家参考,具体内容如下
效果预览:
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部分:
css;">.tab{ display: inline-block; text-align: center; line- } .tab:nth-child(odd){ background-color: #ccc; } .content{ width: 100%; text-align: center; line- }