微信小程序实现滚动Tab选项卡

本文实例为大家分享了微信小程序实现滚动Tab选项卡的具体代码,供大家参考,具体内容如下 最终效果如上。问题: 1、tab标题总共8个,所以一屏无法全部显示。 2、tab内容区左右滑动切换时,tab标题随即做标记(active)。 3、当active的标题不在当前屏显示时,要使其能显示到当前屏中。 一、wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动。 tab内容可左右滑动切换,使用swiper组件实现 为了偷懒,所以数据都通过wx:for遍历重复出来。 说明: 1、设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理