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

骑猪看日落 2023-01-13 04:12 254阅读 0赞

这个超简单的就是把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:\[  
                    \{  
                        name: '学生信息',  
                        id: '0'  
                    \},  
                    \{  
                        name: '学习风格测评',  
                        id: '1'  
                    \},  
                    \{  
                        name: '优势能力测评',  
                        id: '2'  
                    \}\],