1)注册Tab,Tabs组件
import Vue from 'vue';
import {Tab,Tabs} from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
2)使用Tab结构
<van-tabs v-model="active" sticky animated swipeable>
<van-tab title="标签 1">
<p v-for="item in 100" :key="item">
内容 1
</p>
</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
<script>
export default{
data(){
return{
active:2
}
}
}
</script>
3)最终效果图
image.png
总结
1.tab,tabs组件中其中用了三个属性
1>sticky 具有固定功能，下拉时tab组件顶部自动固定。是否使用粘性定位布局
2>animated 是否开启切换标签内容时的转场动画
3>swipeable 是否开启手势滑动切换
2.希望此教程可以帮助到你们。❤❤❤
