前端Vue自定义可自由滚动精美tabs选项卡标签栏标题栏 可设置背景颜色， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13313

效果图如下：

cc-scrollTag

使用方法

 <!-- tabChange: tab选择事件 tagList：tab数据 bgColor:标签背景颜色-->  <cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#FA436A"></cc-scrollTag>  

HTML代码实现部分

 <template>  <view class="content">  <view style="height: 22px;margin: 12px 20px;">红色背景滑动标签栏</view>  <!-- tabChange: tab选择事件 tagList：tab数据 bgColor:标签背景颜色-->  <cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#FA436A"></cc-scrollTag>  <view style="height: 22px;margin: 12px 20px;">橙色背景滑动标签栏</view>  <!-- tabChange: tab选择事件 tagList：tab数据 bgColor:标签背景颜色-->  <cc-scrollTag @tabChange="tabChange" :tagsList="tagListTwo" bgColor="#f37b1d"></cc-scrollTag>  <view style="height: 22px;margin: 12px 20px;">粉色背景滑动标签栏</view>  <!-- tabChange: tab选择事件 tagList：tab数据 bgColor:标签背景颜色-->  <cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#e03997"></cc-scrollTag>  <view style="height: 22px;margin: 12px 20px;">绿色背景滑动标签栏</view>  <!-- tabChange: tab选择事件 tagList：tab数据 bgColor:标签背景颜色-->  <cc-scrollTag @tabChange="tabChange" :tagsList="tagListTwo" bgColor="#39b54a"></cc-scrollTag>  <view style="height: 22px;margin: 12px 20px;">黄色背景滑动标签栏</view>  <!-- tabChange: tab选择事件 tagList：tab数据 bgColor:标签背景颜色-->  <cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#fbbd08"></cc-scrollTag>  <view style="height: 22px;margin: 12px 20px;">橄榄色背景滑动标签栏</view>  <!-- tabChange: tab选择事件 tagList：tab数据 bgColor:标签背景颜色-->  <cc-scrollTag @tabChange="tabChange" :tagsList="tagListTwo" bgColor="#8dc63f"></cc-scrollTag>  </view>  </template>  <script>  export default {  data() {  return {  tagList: [  '首页', '标题一', '标题二', '标题三', '标题四',  '标题五', '标题六',  '标题七', '标题八'  ],  tagListTwo: [  '推荐',  '选项一',  '选项二',  '选项三',  '选项四',  '选项五',  '选项六',  '选项七',  '选项八',  ],  }  },  onLoad() {  },  methods: {  tabChange: function(t) {  console.log("tab选择序列 = " + JSON.stringify(t));  },  }  }  </script>  <style>  .content {  display: flex;  flex-direction: column;  }  </style>