业务场景中有较多的情况下会用到tabs切换组件，例如某某列表啦，滑动切换，实现起来挺简单，这边按照自己业务内的效果手动撸了个组件。
效果图如下。
组件抛出三个属性进行设置：
currentTab: 当前下标。
color: 文字颜色及导航条颜色
list: 循环tab的列表。支持传入badge字段进行redDot红点设置。
<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}"> <view class="navigate-item" id="item{{index}}" a:for="{{list}}" a:key="index" data-index="{{index}}" onTap="handleClick"> <view class="names {{currentTab === index ? 'active' : ''}}" style="color: {{currentTab === index ? color : ''}}">{{item.name}} <text class="badge" a:if="{{item.badge}}">{{item.badge}}</text> </view> <view class="currtline {{currentTab === index ? 'active' : ''}}" style="background: {{currentTab === index ? color : ''}}"></view> </view> </scroll-view> <swiper indicator-dots="{{false}}" onChange=“handleSwiper” current="{{currentTab}}"> <block a:for="{{list}}" a:key="*this"> <swiper-item> <view class="swiper-item">第{{index + 1}}页</view> </swiper-item> </block> </swiper>
至于组件JS
Component({ props: { currentTab: 0, // 当前下标 list: [], // 导航条列表， redDot配置需加入badge字段。如： tabList: [{ name: '有趣好玩', badge: 20}] color: '#00cc88' // 文字及导航条下标 }, methods: { // 导航条切换 handleClick(e) { let currentTab = e.currentTarget.dataset.index this.setData({ currentTab }) }, // 滑动swiper切换导航条 handleSwiper(e) { let { current, source } = e.detail if (source === 'autoplay' || source === 'touch') { const currentTab = current this.setData({ currentTab }) } } }, });
至于引用的地方就更简单了：
json引用组件配置就不说了，
页面操作如下：
<tabs list="{{tabList}}" color="blue"/>
以上就是一个简单的tabs导航条联动切换效果，有问题欢迎评论指正，代码可自行修改新增属性。
最后放上代码片段：访问运行查看效果
https://pen.mini-code.com/s/8f444464-c2e5-4350-8289-45be27497701
