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