微信小程序如何制作支持滚动的Tab选项卡功能？

本文共计1179个文字，预计阅读时间需要5分钟。

原文：本文实例为大家分享了微信小程序实现滚动Tab选项卡的完整代码，供大家参考。具体内容如下+最终效果如下。问题：1、tab总共有8个，一页无法全部显示。2、tab内容区域左右滑动。

改写后：本文提供微信小程序滚动Tab选项卡的实现代码示例，供参考。代码内容详述如下，最终效果展示如下。疑问：1、tab共8个，一页无法全显示。2、tab内容区域支持左右滑动。

本文实例为大家分享了微信小程序实现滚动Tab选项卡的具体代码，供大家参考，具体内容如下

最终效果如上。问题：

1、tab标题总共8个，所以一屏无法全部显示。
2、tab内容区左右滑动切换时，tab标题随即做标记（active）。
3、当active的标题不在当前屏显示时，要使其能显示到当前屏中。

一、wxml结构

tab标题因一排八个，所以使用 scroll-view组件，使其可横向滚动。
tab内容可左右滑动切换，使用swiper组件实现
为了偷懒，所以数据都通过wx:for遍历重复出来。

说明：

1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。