本文实例为大家分享了微信小程序滑动标签切换展示的具体代码，供大家参考，具体内容如下

效果预览：

射流研究…部分：

页面({ data: { arr: [1，2，3，4，5，6，7，8]，index: 1 }，onLoad:函数（选项){这个。setdata({ child w : this。数据。由…改编长度* 80 })；}，tabOn:函数{这个。setdata({ index : e . CurrentTarget。数据集。索引1 })；}})wxtml部分：

scroll-view scroll-x scroll-with-animation=' true ' view style=' width : { { child w } } px ' block wx : for=' { { arr } } ' view class=' tab ' catch tap=' tabOn ' data-index=' { { index } } ' { { item } }/view/block/view/scroll-view class=' content ' wx : if=' { { index==1 } }内容一/view view class=' content ' wx : if=' { { index==2 } } '内容二/view view class=' content ' wx : if=' { { index==3 } } '内容三/view view class=' content ' wx : if=' { { index==4 } } '内容四/view view class=' content ' wx : if=' { { index==5 } } '内容五/view view class=' content ' wx : if=' { { index==6 } } '内容六/view view class=' content ' wx : if=' { { index==7 } } '内容七/view view class=' content ' wx : if=' { { index==8 } } '内容八/viewwxss部分：tab { height: 50px宽度： 80px显示器：内联块；文本对齐：中心；线高： 50px} .tab第：个孩子(奇数){底色： # CCC}.内容{宽度： 100%；高度： 200像素；文本对齐：中心；线高： 200像素；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。