【Vue3+Ts project】 vant4组件标签页实现 tab标签栏吸顶效果

最新推荐文章于 2024-06-24 16:48:53 发布

春暖花开.,

最新推荐文章于 2024-06-24 16:48:53 发布

阅读量1k

点赞数

文章标签：开发语言 javascript vue.js vue 前端框架

本文链接：https://blog.csdn.net/m0_64494670/article/details/131270080

版权

未实现前

<van-tabs >
       <van-tab title="标签 1">
         <p v-for="item in 100">{{ item }}</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>

实现后

给van-tabs添加 sticky 即可实现

   <van-tabs sticky>
                <van-tab title="标签 1">
                    <p v-for="item in 100">{{ item }}</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>