uni-app实现可以滑动的tab标签

最新推荐文章于 2024-09-09 14:32:59 发布

肖肖肖丽珠

最新推荐文章于 2024-09-09 14:32:59 发布

阅读量1.4k

点赞数

分类专栏： uni-app 小程序

本文链接：https://blog.csdn.net/qq_33769914/article/details/115731751

版权

本文介绍了如何在uni-app中实现可滑动的tab标签功能。通过将tab标签的视图放置在scroll-view组件中，并结合vue的v-for指令和条件类进行动态样式切换，实现了左右滑动切换标签的效果。示例代码展示了数据结构和事件处理方法。

摘要由CSDN通过智能技术生成

这个超简单的就是把tab标签的view写在scroll-view就可以啦

    <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" >
                       <block v-for="(item,index) in tabBars" :key="index">
                           <view class="scroll-tab-item" :class="{'active': tabIndex==index}"
                           @tap="toggleTab(index,$event)">
                               { {item.name}}
                               <view class="scroll-tab-line"></view>
                           </view>
                       </block>
</scroll-view>

data() {
           return {
               tabIndex: 0, /* 选中标签栏的序列,默认显示第一个 */
               tabBars:[
                   {