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

骑猪看日落 2023-01-13 04:12 240阅读 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'  
                    \}\],

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 动态组件实现Tabs标签切换组件

拿作为案例，它的tabs标签有很多，如：推荐、小说、儿童等等。用户点击小说就会切换到小说组件，如果仔细看第一次是有一个加载的过程，如果你再返回到推荐页，再次点击小说时就没...

痛定思痛。/ 2024年04月22日 15:07/ 0 赞/ 83 阅读

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

这个超简单的就是把tab标签的view写在scroll-view就可以啦 <scroll-view scroll-x="true" scroll-with-anima

骑猪看日落/ 2023年01月13日 04:12/ 0 赞/ 241 阅读

相关 uni-app滑动菜单效果.既可以点击也可以滑动切换tab

> <template> > > <view class="homepage"> >  >

港控/mmm°/ 2022年11月19日 12:57/ 0 赞/ 366 阅读

相关 uniapp实现页面左右滑动，上下滑动事件

实现代码： <view class="" @touchstart="touchstart" @touchend="touchend"> </view>

忘是亡心i/ 2022年11月18日 02:29/ 0 赞/ 620 阅读

相关 Vue实现tab导航栏，支持左右滑动

本文主要介绍：利用Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第一屏展示的最后一个且还有元素未展示时，自动滑动显示出未显示的元素。 tab

我就是我/ 2022年10月10日 11:13/ 0 赞/ 125 阅读

相关 html4如何做滑动tab,swiper4实现移动端导航栏tab滑动切换

swiper4移动端导航栏tab滑动切换效果，供大家参考，具体内容如下效果如图： ![20201016101841397.jpg][] 首先引入swiper的css和j

秒速五厘米/ 2022年10月06日 11:43/ 0 赞/ 209 阅读

相关添加tab标签

1.xml <TabHost android:layout_width="wrap_content" android:layou

系统管理员/ 2022年08月06日 09:09/ 0 赞/ 193 阅读

相关 Tab标签

实现类似IE7的Tab标签风格.效果如下: ![untitled.JPG][] ![ContractedBlock.gif][] ![ExpandedBl

谁借莪１个温暖的怀抱￠/ 2021年12月11日 19:47/ 0 赞/ 257 阅读

相关 uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9ta

傷城~/ 2021年08月13日 16:18/ 0 赞/ 626 阅读

相关 uniapp 滑动删除功能实现（右侧滑动展示菜单功能）

列表滑动删除功能 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

桃扇骨/ 2021年07月25日 22:19/ 0 赞/ 2005 阅读