当前位置: 首页 > news >正文

vant ( weapp ) - - - - - van-tabs组件选中下划线初始位置异常

这里写自定义目录标题

  • 1. 当前效果展示
  • 2. 官方解释 & 方案

1. 当前效果展示

在这里插入图片描述
明显可以看到框内的光标位置偏移了,但当切换一次之后就会显示正常。
只有初次打开的时候,才会出现上述问题。

代码如下:

<van-popup show="{{ makeShow }}" ><van-tabs active="{{ active }}" animated title-active-color='#9c6af1' bind:click="onChange"><van-tab wx:for="{{maps}}" wx:for-item="tabItem" title="{{tabItem.title}}" wx:key="index">// 这里是内容{{item.content}}</van-tab></van-tabs>
</van-popup>

2. 官方解释 & 方案

👇下面是官方给出的解释以及方案
在这里插入图片描述

由于我的van-tabs是在弹窗里展示的,使用方法二进行resize方案不适合我。

所以采用方案一,逻辑如下

切换弹窗展示状态之后,在回调函数里再修改其状态即可

需要给van-tabs增加wx:if属性
修改如下:

<van-popup show="{{ makeShow }}" ><van-tabs wx:if="{{ isTabsReady }}" active="{{ active }}" animated title-active-color='#9c6af1' bind:click="onChange"><van-tab wx:for="{{maps}}" wx:for-item="tabItem" title="{{tabItem.title}}" wx:key="index">// 这里是内容{{item.content}}</van-tab></van-tabs>
</van-popup>
this.setData({makeShow: true, // 修改popup展示状态
},()=>{this.setData({isTabsReady: true // 修改tabs展示状态})
})

如此初始展示就正常了
在这里插入图片描述

http://www.lryc.cn/news/388724.html

相关文章:

  • 007 栈(lua)
  • SQL中Order by详解
  • 【git】存在git LFS文件时如何处理
  • 面向阿克曼移动机器人(自行车模型)的LQR(最优二次型调节器)路径跟踪方法
  • 【运维】在 Docker 容器中指定 UTF-8 编码:方法与技巧
  • primetime中cell和net的OCV
  • FlinkX学习
  • 新书速览|解密AI绘画与修图: Stable Diffusion+Photoshop
  • 1111111111111
  • 云原生概念
  • NoSQL之Redis高可用与优化
  • MySQL 常见存储引擎详解(一)
  • Leetcode 股票买卖
  • 小白学习手册:轻松理解MQ消息队列
  • electron线上更新
  • 谈谈检测浏览器类型
  • Django 和 Django REST framework 创建对外 API
  • 数据结构之“刷链表题”
  • 复分析——第9章——椭圆函数导论(E.M. Stein R. Shakarchi)
  • 使用kubeadm安装k8s并部署应用
  • springMVC学习
  • 深入探讨光刻技术:半导体制造的关键工艺
  • CesiumJS【Basic】- #042 绘制纹理线(Primitive方式)
  • 代码随想录第38天|动态规划
  • java生成excel,uniapp微信小程序接收excel并打开
  • sam_out 目标检测的应用
  • VLAN原理与配置
  • 使用Spring Boot实现RESTful API
  • 中英双语介绍美国常春藤联盟( Ivy League):八所高校
  • 【计算机网络】常见的网络通信协议