Swiper 滑动tab组件 uni-app

之前做Vue项目时有各种组件库Element-UI、Vux、Weex等，现在需要完成的项目是用uni-app去做的，限制了全套用第三方插件，稳定性不好。自身推荐的组件有时候没办法满足发开需求。从而，只能在开发过程中，去写组件。
vue插件地址可以根据项目自身的样式去做修改，但是不怎么适用于真机，测试不通过。
uni-app官网插件市场推荐横向选项卡。

简单的Demo实例

1.把下载下来的component放到项目中。

2.在 script 中引用组件

import WucTab from '@/components/wuc-tab/wuc-tab.vue';

export default {
    data() {
        return {
          TabCur: 0,
          tabList: [{ name: '精选' }, { name: '订阅' }], //修改对应的tab标签name
        }},
    components: { WucTab },
    methods: {
        tabChange(index) {
            this.TabCur = index;
        }
    }
}

3.在template 中与swiper结合使用

<wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange"></wuc-tab>
<swiper :current="TabCur" duration="300" @change="swiperChange">
  <swiper-item v-for="(item,index) in tabList" :key="index">
    <div>{{item.name}}</div>
  </swiper-item>
</swiper>

具体效果看具体情况。