使用vant实现简单Tab 标签页

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.希望此教程可以帮助到你们。❤❤❤