解决微信小程序引入vant-tabs编译时第一个tab不显示底部线条的问题

最新推荐文章于 2024-05-13 20:13:41 发布
最新推荐文章于 2024-05-13 20:13:41 发布
阅读量939 收藏 1
点赞数
分类专栏： 前端 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51002293/article/details/128432475
版权

第一个已经被选中 但是下面本该有的蓝色线条没有

 原因：当tabs渲染时异步获取的数据还没到 拿不到tab的name 组件无法计算线条宽度

解决方法：在tabs组件上新增wx:if="{{tabsList.leng!==0]}" 

tabsList是动态渲染tab的数据

网上相关答案是直接判断这个数据有没有或者使用tabs组件上的resize方法 我这里使用wx:if="{{其它可以用作判断的数据}}"和resize都是无效的

判断数组长度一把过

 

 

codecodegirl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vant中 tab栏遇到的坑 van-tabs。
柠檬不萌只是酸i
05-27 1万+
话不多说，先看下问题描述： 我的需求：点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示刚才被点击的tablan高亮显示。（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 所以，大部分人的解决办法就是将当前选中的tab的索引缓存起来，等回到该页面的时候，让被缓存的那个高亮显示出来。 坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时.
微信小程序使用 vant Dialog组件的正确方式
10-15
主要介绍了微信小程序使用 vant Dialog组件的正确方式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序 vant tabs组件选中下划线位置异常
K0K0K0K0K0K0的博客
08-03 1101
在网上搜了很多都没有解决，使用this.selectComponent 获取不到resize这个方法 解决办法如下： 定义一个变量showf:false data:{ show:false }, onReady:function(){ setTimeout(() => { this.setData({ show:true }) }, 1000); } 然后在van-tabs标签上使用wx:if="{{show
iOS13中 UITabBar隐藏线条、定位不起作用问题
tianyitianyi1的专栏
10-02 2068
1. 隐藏线条处理 CGRect rect = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); UIGraphicsBeginImageContext(rect.size); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetFil...
Swift 语法小结
Raleigh
08-03 4323
Swift 语法小结 1.  Optional 就是枚举    An Optional is just an enum        enum Optional{           case None           case Some(T)        } 2.Array的声明   var a=Array()   var a=[String]()   let
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看头条tab栏） 点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示刚才被点击的tab栏高亮显示。（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 所以，大部分人的解决办法就是将当前选中的tab的索引缓存起来，等回到该页面的时候，让被缓存的那个高亮显示出来。 坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时用缓存赋值给 v-model = ” active ”
底部导航栏进入详情页不显示
Aa__Ki的博客
09-30 1133
在写移动端项目的时候，一般情况下一级页面是需要底部导航的，所以说就有些页面是不需要底部导航条的，比如说，详情页就不得要底部导航。 利用路由元（meta）设置参数 先创建底部的导航栏 在conponents文件夹下面创建Tabbar.vue,我用的是vant的Tabbar组件 <div class="tabbar"> <van-tabbar v-model="active" :placeholder="true" safe-area-inset-bottom route>
【已解决】uniapp使用vant-ui中的tab标签页的时候，发现底下红色的切换线不见了
番茄Salad
09-08 829
按F12查看vant-ui源码你会发现他的Tab标签页里面有个width，但是我们引入到uniapp之后发现width没有了（不知道什么情况，可能是兼容问题吧）所以我们解决的办法，只需要在App.vue中给全局.van-tabs__line添加width宽度即可解决！
vue 项目 vant-tabs 初始化 下标 active 无效
xiamoziqian的博客
01-06 8734
需求： 获取路由中的参数值，根据参数值 初始化active的值，效果如下 初始代码： <van-tabs v-model:active="active" @click="onClick" swipeable title-active-color="#4EC8F2" line-width="19" line-height="2"> <van-tab v-for="(item, index) in tabs" :key="index" :title="item"> 这是内容 &
解决el-tabs默认选项下划线消失问题
qq_53247156的博客
09-02 3286
在不点击tabs的情况下加载的组件，el-tabs__active-bar的宽度为0，导致下划线不显示，因此在方法里设置宽度即可。
微信小程序引入vant-weapp
01-03
1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -...
微信小程序引入Vant组件库过程解析
11-30
1.先在微信开发者工具中打开项目的终端： 然后初始化一个package.json文件：输入命令：npm init 然后一路回车默认的即可： npm init 项目就回产生一个package.json文件： { "name": "miniprogram", "version...
微信小程序npm引入vant-weapp的踩坑记录
12-01
微信小程序项目使用npm安装vant-weapp的正确步骤  使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装...
iview的tab选项卡切换下边线样式设置
qq_26596795的博客
09-12 784
iview的tab选项卡切换下边线样式设置，atb选项卡下边线宽度长
笔记本 - 数据分析百宝箱
银晗的学习博客
04-18 4985
本文为我在处理数据时，积累的各种技巧与操作，可以当作工具，遇到不会的操作直接查，尤其是Pandas经验最丰富，基本上可以解决一般的问题
el-table 去掉最下面的白线
绿葡萄的博客
05-31 1137
.parent .el-table::before{ background-color: transparent; }
记一次踩雷经历：Vue引入vant /van-tabs组件后不显示/van-tabs和子路由的封装后Failed to resolve directive: keep-scroll-position
明日复明日的博客
05-05 7982
核心错误应该是[Vue warn]: Property or method "$t" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based compone...
隐藏tableview 下面多余的线条
u013428812的专栏
11-06 597
在tableviewplain样式中，如果定义的行数比较多而内容比较少，比如一页中只显示了一个或者两个内容，而tableview的行数肯定不会只有这么两行，因此下面多余的行数就会显示出来，看起来不是特别美观，如下面的图片 最下面的tableview的线条多余出来了，如何可以将它去掉呢，之前解决的办法是将上面定义成一个view，而tableview通过数组的个数显示到view的大小，后来项
如何用微信小程序实现远程控制4路控制器/断路器
最新发布
tyanzhiqi的专栏
05-13 662
如何用微信小程序实现远程控制4路控制器/断路器呢？本文描述了使用微信小程序调用HTTP接口，实现控制4路控制器/断路器，支持4路输出，均可独立控制，可接入各种电器。
微信小程序vant-popup
08-13
微信小程序的vant-popup是Vant Weapp组件库中的一个弹出层组件，用于展示弹出框、提示框、菜单等内容。它提供了丰富的配置选项，可以根据需求进行自定义设置。 要使用vant-popup组件，首先需要引入Vant Weapp组件库，并在需要使用的页面的json文件中进行配置。例如： ``` { "usingComponents": { "van-popup": "路径/vant-weapp/dist/popup/index" } } ``` 然后，在对应的wxml文件中，使用vant-popup组件，例如： ``` <van-popup show="{{ true }}" position="bottom"> <!-- 弹出层内容 --> </van-popup> ``` 在以上示例中，通过设置show属性为true，可以控制弹出层的显示与隐藏。position属性可以设置弹出层的位置，包括top、bottom、left、right等。 你可以根据Vant Weapp官方文档中的说明，进一步了解vant-popup组件的使用方法和配置选项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值