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

news2024/11/16 21:44:43

这里写自定义目录标题

  • 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.coloradmin.cn/o/1882813.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【超级简单】植物大战僵尸杂交版V2.1,手机上最简单的安装方法~!

大家好&#xff0c;我是坤坤黑科技&#xff01;之前给大家分享了植物大战僵尸杂交版手机的安装方法&#xff0c;但是很多朋友还是因为操作难度大所以没有玩到。今天发现一个更加简单的在手机上玩植物大战僵尸杂交版的方法&#xff0c;直接安装就可以玩到最新的2.1版本~ 植物大…

【python】最新版抖音s逆向拿到数据,非常详细教程(附完整代码)

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

SaaS增长:小型SaaS企业可以使用推荐奖励计划吗

在SaaS&#xff08;软件即服务&#xff09;行业的激烈竞争中&#xff0c;如何快速有效地增长用户数量是每个企业都面临的挑战。对于小型SaaS企业来说&#xff0c;资源有限&#xff0c;如何最大化利用现有资源实现用户增长成为了一个重要议题。在这样的背景下&#xff0c;推荐奖…

解决 npm intasll 安装报错 Error: EPERM: operation not permitted

Node.js安装及环境配置完成之后 npm install express -g 安装全局的模块报错提示没有权限operation not permitted mkdir 错误编号4048&#xff1a; 其原因是当前用户操作该目录权限不足&#xff0c;当以管理员身份运行cmd&#xff0c;再执行npm install express -g 是不会报权…

JELR-G150F可调漏电继电器 面板安装 30~300mA 约瑟JOSEF

一、应用 JELR系列漏电继电器&#xff08;以下简称继电器&#xff09;适用于交流电压为660V.至1140V电压系统中,频率为50Hz,电流15~4000A线路中做有无中性点漏电保护. 该继电器可与带分励脱扣器或失压脱扣器的断路器、交流接触器、磁力启动器等组成漏电保护装置&#xff0c;作…

Vue3 登录成功,浏览器存在toke,再次访问/login路由到/index 首页页面

文章目录 目录 文章目录 流程 小结 概要流程技术细节小结 概要 首先需要清楚知道浏览器localstorage和Session storage的区别 localStorage 和 sessionStorage 是 HTML5 提供的两种客户端存储数据的方法&#xff0c;它们在使用和生命周期上有一些区别&#xff1a; 1. 生命周期…

视频共享交换平台LntonCVS视频融合共享平台搭建智慧园区视频监控平台应用方案

智慧园区作为现代化城市发展的重要组成部分&#xff0c;不仅承载着产业升级的使命&#xff0c;更是智慧城市建设的重要体现。随着产业园区竞争的激烈化&#xff0c;越来越多的关注点集中在如何打造完善的智慧园区上。 在智慧园区规划的初期阶段&#xff0c;面临诸多挑战。如何选…

刷代码随想录有感(122):动态规划——最长子序列

题干&#xff1a; 代码&#xff1a; class Solution { public:int lengthOfLIS(vector<int>& nums) {if(nums.size() < 1)return nums.size();vector<int>dp(nums.size(), 1);int res 0;for(int i 1; i < nums.size(); i){for(int j 0; j < i; j)…

生信新包|Mellon·量化单细胞表型景观中的细胞状态密度

分化是支持所有多细胞生物发育和功能的动态过程。了解细胞如何沿着分化轨迹分布对解析驱动分化的机制、找出关键调控因素以及表征疾病中的失调至关重要。细胞状态密度是这种细胞分布的表现&#xff0c;受到基本生物过程的影响。增殖会增加某一状态下的细胞数目&#xff0c;从而…

倒装COB显示屏与传统SMD显示屏安装方式有哪些不同?

COB显示屏与传统SMD显示屏是商业显示领域中非常重要的两种载体&#xff0c;在前面的文章当中我们为大家阐述了倒装COB显示屏的技术特点&#xff0c;今天跟随COB显示屏厂家深圳市中品瑞科技一起来看看&#xff0c;COB显示屏的安装与传统LED显示屏的安装有哪些不同&#xff1f; 一…

Dev++软件连接Sqlite

Dev中的C语言使用连接sqlite数据库 1.下载sqlite3.dll和sqlite3.h sqlite3.dll类似于.c文件&#xff0c;封装了函数的原型。 sqlite3.h库文件声明函数。 官网地址下载&#xff1a;sqlite sqlite-amalgamation-3460000.zipsqlite-dll-win-x64-3460000.zip 2.新建c项目 1. …

es学习初步总结

看api看麻了不知道意义在哪里&#xff0c;所以就简单总结点我觉得有用的东西 基本数据结构解析 分为了文档&#xff0c;索引和映射 索引可以理解为一张表&#xff0c;映射描述了索引的数据结构&#xff0c;而文档就是一个个具体的行 所以一般我们需要在申明索引的时候同时申…

STC8/32 软硬件I2C通讯方式扫描I2C设备地址

STC8/32 软硬件I2C通讯方式扫描I2C设备地址 📄主要用于检测挂载在I2C总线上的设备。在驱动I2C设备之前,如果能扫描到该设备,说明通讯设备可以连接的上,在提前未知I2C地址的情况下,可以方便后面的驱动代码的完善。 🔬扫描测试效果:(测试mpu6050以及ssd1306 i2c oled )…

Java源码实现《植物大战僵尸》

前言 学Java的朋友们&#xff0c;福利来了&#xff0c;今天小编给大家带来了一款 植物大战僵尸源码&#xff0c;看图: 视频演示 java植物大战僵尸 环境JDK1.8 类继承UML图 源码实现 我们先从main函数看起&#xff0c;继承了javafx.application.Application。JavaFx是Java图形…

3d里面减小模型大小的键是什么意思?---模大狮模型网

在3D建模和动画制作中&#xff0c;调整模型的大小是常见的操作&#xff0c;但这并不仅仅意味着简单地改变模型的尺寸。特别是当我们谈论到"减小模型大小的键"时&#xff0c;涉及到更深层次的技术和工作流程。让我们深入探讨这一话题&#xff0c;理解在3D环境中如何有…

@Cacheable解决复杂对象形参导致的缓存失效问题(如Map参数)

在Spring中使用 Cacheable 注解可以非常方便地实现方法的自动缓存机制。如以下代码&#xff1a; Cacheable(value "YwtbToken", key "#p0") public String createToken(String dlzh) {...}但当Cacheable 注解修饰的方法参数使用了复杂对象&#xff0c;如…

WMS、ERP、MES之间的关系

WMS&#xff08;仓库管理系统&#xff09;、ERP&#xff08;企业资源计划&#xff09;、MES&#xff08;制造执行系统&#xff09;是企业管理和运作中常见的三种系统&#xff0c;它们在不同的层面上发挥作用&#xff0c;但之间又有紧密的联系。三者之间的区别如下&#xff1a; …

中电金信:银行业私有云何去何从

2009年&#xff0c;云计算开始从概念走向实践。在这一年&#xff0c;Gartner在预测2010十大发展趋势中&#xff0c;将云计算列在榜首。在这之后&#xff0c;谷歌、亚马逊、IBM等科技巨头纷纷加码对云计算的研发投入。2010年正式迎来云计算时代&#xff0c;这一年也被定为“云元…

window用户层文件系统fuse(wdm驱动)

dokany https://github.com/dokan-dev/dokany.git 需要安装wdk&#xff0c;2022可以直接通过windows driver扩展安装 项目使用nuget添加wdk依赖 Version of Uwp Package 10.0.26100.0 does not match TargetPlatformVersion 10.0.22621.0. windows sdk版本填写正确的版本号…

批量签章签名如何实现?

在数字化转型的浪潮中&#xff0c;电子签章技术已经成为了企业运营和个人业务处理中不可或缺的一部分。本文将详细介绍一种先进的电子签章机&#xff0c;它不仅符合国家安全标准&#xff0c;还具备多样化的签章功能和高效的任务处理能力。 电子签章机是一种高度集成的设备&…