vant tabs组件选中第一个下划线位置异常

已于 2022-06-24 10:19:29 修改
阅读量852 收藏
点赞数
分类专栏： 小程序 文章标签： 前端 javascript 大数据
于 2022-06-24 09:58:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43583887/article/details/125439714
版权

错误图示例
在这里插入图片描述
产生场景：顶部标题是后台接口数据返回。vnat-tabs已经在data里面设置跳转到该页面是所选中状态active=0，数据出现后，下划线标签位置异常，在标题获取成功后再次设置active=0,无效果，但是有时偶现下划线数据正常。
原因分析：Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。
在这里插入图片描述
问题解决:我使用了方法二
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

注意点：在获取标题数据完后调用selectComponent方法，不然重绘失效。
vant-tabs官方地址

00008795
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 使用vant插件做tabs切换和无限加载功能的实现
01-18
样例： 1.创建vue项目，不再详述 2.引入vant 之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了，大家可以借鉴，看源代码可能比官方给的文档更直观 官方文档 我在文件中的使用，没有使用下拉刷新的功能，大家可以直接看官网代码： <template> <div
修改van-tabs切换菜单栏下标的颜色
m0_46577631的博客
12-14 617
<van-tabs v-model="active" animated> <van-tab v-for="index in 4" :title="'选项 ' + index"> 内容 {{ index }} </van-tab> </van-tabs> 修改菜单栏下标颜色的方法： .van-tabs{ ::v-deep &__line{ bac...
vant tabs切换属性，导致popup弹出框位置没有全屏展示
qq_40269801的博客
03-27 296
问题：点击一个按钮后，想要的是一个全屏展示的弹出框去展示iframe的附件；但现在并没有全屏展示；transform:translate3d(0%, 0px, 0px) 是这个属性影响的，但这个属性是tabs切换用的属性；最后解决办法：只要挂载到body上，就可以了。因为我项目中vant版本是v2的，但我看的文档是v4的，所以一直没生效，以为这个部分不受版本影响，也是刚开始用vant，所以很生疏。
van-tabs下划线位置错位
ljw的博客
01-21 2327
初始化页面时，van-tabs下划线位置错位： 解决方案： ①如果是通过v-show来控制组件显隐，改为v-if: <applyList v-if="index === '2'"></applyList> ②使用官方提供的resize方法： <van-tabs ref="tabs" v-model="active" title-active-color="#2080F7" color="#2080F7"> <van-tab tit.
vant van-tabs组件刷新时下划线位置错误问题
grand_brol的博客
04-13 2211
错误描述 解决方式 使用resize方法。不过因为刷新时重绘的可能比较慢，要延时一会调用这个方法，否则，没有效果 setTimeout(() => { this.$refs.tabs.resize(); }, 200);
van-tabs的底部条位置错误，resize方法没有作用
lotpyve的博客
01-20 800
官网所说的解决办法如图，不过我由于某些限制不能使用第一种方法，第二种方法resize使用了没有作用。方法2：在nextTick里面改变active的值，这里需要注意，赋的值和原始值必须不一样。最近在使用vant里面的组件，van-tabs是，底部条位置总是错误，页面长这样。方法3：把要赋值的函数换为 async 函数，结果换为 await 获取。后面我发现了三种解决办法（如果说明不清楚，可看代码），办法如下。方法1：在nextTick里面给要展示tab数组赋值。可是我想要的结果是这样。
van-tabs组件底部横条偏移问题
weixin_44415346的博客
08-20 1596
v解决an-tabs组件底部横条偏移
vant中tab标签栏下划线位置异常的解决方案
weixin_54217534的博客
07-16 3552
通过使用了vant2中的tab标签栏引入了vue项目，可以实现切换的效果，但在使用的过程中发现，标签栏的。我在渲染这个tab标签栏的组件使用了v-show的指令，导致了下划线位置出错的情况。在tab标签栏的tabs上有resize重绘这个方法，可以调用这个来解决这个问题。.如果项目中允许的话，可以将v-show改为v-if则可以解决这个问题。的情况，效果如下图所示，下划线位置和流行并没有对齐。在我的项目中我是用了第二种方法进行解决，效果如下。...
解决微信小程序引入vant-tabs编译时第一个tab不显示底部线条的问题
weixin_51002293的博客
12-24 965
网上相关答案是直接判断这个数据有没有或者使用tabs组件上的resize方法 我这里使用wx:if="{{其它可以用作判断的数据}}"和resize都是无效的。原因：当tabs渲染时异步获取的数据还没到 拿不到tab的name 组件无法计算线条宽度。解决方法：在tabs组件上新增wx:if="{{tabsList.leng!第一个已经被选中 但是下面本该有的蓝色线条没有。tabsList是动态渲染tab的数据。
底部导航栏进入详情页不显示
Aa__Ki的博客
09-30 1138
在写移动端项目的时候，一般情况下一级页面是需要底部导航的，所以说就有些页面是不需要底部导航条的，比如说，详情页就不得要底部导航。 利用路由元（meta）设置参数 先创建底部的导航栏 在conponents文件夹下面创建Tabbar.vue,我用的是vant的Tabbar组件 <div class="tabbar"> <van-tabbar v-model="active" :placeholder="true" safe-area-inset-bottom route>
解决Vant组件库tabs标签页选中状态与当前页面不匹配
qq_52161116的博客
04-26 1016
通过vue-router的$route.path获取到当前页面的路由路径，然后将路径与组件进行双向数据绑定,同时将的name属性也设置为动态的页面路径。
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看...坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时用缓存赋值给 v-model = ” active ”
Vant移动端组件库-其他
06-11
在应用一系列的优化手段之后，目前 Vant 的组件平均体积仅有 8.8KB，Uglify + Gzip 后约 1KB。丰富实用的业务组件Vant 不只是提供基础的UI组件，为了方便开发者快速构建移动商城，Vant 增加了许多移动商城内常用的...
微信小程序vant弹窗组件的实现方式
10-15
主要介绍了小程序vant弹窗组件的实现方式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
小程序里使用van-tab底部条位置错乱??
Hassan的小博客!
01-13 1358
van-tab底部条位置错乱
van-tabs组件底部下划线偏移问题
最新发布
donghua201的博客
04-29 173
van-tabs组件在首次加载的时候底部选中横条会出现偏移的情况，重新选择后会恢复原样。
微信小程序 vant tabs组件选中下划线位置异常
K0K0K0K0K0K0的博客
08-03 1106
在网上搜了很多都没有解决，使用this.selectComponent 获取不到resize这个方法 解决办法如下： 定义一个变量showf:false data:{ show:false }, onReady:function(){ setTimeout(() => { this.setData({ show:true }) }, 1000); } 然后在van-tabs标签上使用wx:if="{{show
小程序+vant之使用tabs底部条位置错误
weixin_41700532的博客
03-22 2518
vants底部条错位
vue vant tabs组件选中下划线位置异常
青春流年的博客
10-30 6125
vue vant tabs组件选中下划线位置异常 问题描述：代码片段原因分析：解决方案：修改后代码:效果图 ) 问题描述： 在使用vant中Tab 标签, 点击显示会出现下划线位置异常,如下图: 代码片段 <template> <div id="app"> <van-button type="primary" @click="isShow = !isShow">点击显示</van-button> <div v-show="isSho
vant tabs 居中
05-31
你可以通过设置 `v-tabs` 的 `centered` 属性来实现居中显示。例如： ```html <v-tabs centered> <v-tab>Tab 1</v-tab> <v-tab>Tab 2</v-tab> <v-tab>Tab 3</v-tab> </v-tabs> ``` 这样就可以让 `v-tabs` 的标签页居中显示。如果还需要调整标签页之间的间距，可以通过设置 `v-tabs` 的 `slider-color` 属性来实现。例如： ```html <v-tabs centered slider-color="#ff0000"> <v-tab>Tab 1</v-tab> <v-tab>Tab 2</v-tab> <v-tab>Tab 3</v-tab> </v-tabs> ``` 这样就可以将标签页之间的间距颜色设置为红色，从而实现更好的居中效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值