因为要使用tab页切换组件,只能使用name匹配
而vant中的tab手势滑动又必须是索引值才生效
一直以为:鱼与熊掌不能兼得,直到今天!!!
( ̄︶ ̄)↗
以前的代码
<van-tabs v-model="tabName" swipeable title-active-color="#0084FF" color="#0084FF">
<van-tab name="classIntroduction" title="课程介绍"></van-tab>
<van-tab name="classList" title="听课列表"></van-tab>
</van-tabs>
<transition name="component-fade" mode="out-in">
<keep-alive>
<component v-bind:is="tabName"></component>
</keep-alive>
</transition>
解决后的代码
<van-tabs v-model="active" swipeable animated>
<van-tab v-for="(item, index) in arr" :title="item.title" :key="index">
<all v-if="(active == 0)" ></all>
<completed v-if="(active == 1)" />
<undone v-if="(active == 2)" />
<connected v-if="active==3" />
<notContacted v-if="active==4"/>
</van-tab>
</van-tabs>
组件切换+手势滑动完美(●’◡’●)