之前做Vue項(xiàng)目時(shí)有各種組件庫(kù)Element-UI、Vux罗售、Weex等，現(xiàn)在需要完成的項(xiàng)目是用uni-app去做的钩述，限制了全套用第三方插件寨躁，穩(wěn)定性不好。自身推薦的組件有時(shí)候沒辦法滿足發(fā)開需求牙勘。從而职恳，只能在開發(fā)過程中，去寫組件。
vue插件地址可以根據(jù)項(xiàng)目自身的樣式去做修改放钦，但是不怎么適用于真機(jī)色徘，測(cè)試不通過。
uni-app官網(wǎng)插件市場(chǎng)推薦橫向選項(xiàng)卡操禀。
圖片.png
簡(jiǎn)單的Demo實(shí)例
1.把下載下來的component放到項(xiàng)目中贺氓。
2.在 script 中引用組件
import WucTab from '@/components/wuc-tab/wuc-tab.vue';
export default {
data() {
return {
TabCur: 0,
tabList: [{ name: '精選' }, { name: '訂閱' }], //修改對(duì)應(yīng)的tab標(biāo)簽name
}},
components: { WucTab },
methods: {
tabChange(index) {
this.TabCur = index;
}
}
}
3.在template 中與swiper結(jié)合使用
<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>
具體效果看具體情況。
