微信小程序中van-tab的title(动态)根据文本内容,自适应宽度

小程序van-tab的title(动态)根据文本内容,自适应宽度

  • 效果图
  • 代码
  • 主要调整点

效果图

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

代码

<van-tabs  color="#00aaff" active="{{ active }}" bind:click="onTabChange">
	<van-tab title="7天内"></van-tab>
	<van-tab title="15天内"></van-tab>
	<van-tab title="30天内"></van-tab>
	<van-tab  title="{{tabsTitle}}"></van-tab>
</van-tabs>
data: {
		active: 0,
		tabsTitle: "自定义",
	},
//选项卡切换
	onTabChange(event) {
		console.log(event, "eventeventeventevent")
		let indexVal = event.detail.index;
		if (indexVal == 3) {
			this.setData({
				tabsTitle: "这里有很长的数据会展示在title里",
			});
		} else {
			this.setData({
				tabsTitle: "自定义",
			});
		}
	},

主要调整点

.van-tab:last-child {
    flex: none!important;
}

我只需要适应最后一个tab所以给它flex置为none就可以,如果每一个都要适应,那么就
.van-tab{
flex: none!important;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/641004.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

游戏后台开发技术全面解析

在这个数字时代&#xff0c;游戏产业已经成为全球最受欢迎的娱乐方式之一。从简单的手机游戏到复杂的大型多人在线角色扮演游戏&#xff08;MMORPG&#xff09;&#xff0c;游戏的世界正变得越来越丰富和多样化。而这一切的背后&#xff0c;都离不开强大的游戏后台技术支持。在…

【网络技术】【Kali Linux】Wireshark嗅探(十四)QUIC(快速UDP互联网连接)协议报文捕获及分析

往期 Kali Linux 上的 Wireshark 嗅探实验见博客&#xff1a; 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;一&#xff09;ping 和 ICMP 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;二&#xff09;TCP 协议 【网络技术】【Kali Linux】Wireshark嗅探&…

Mac电脑太卡了怎么办 Mac电脑常见问题 cleanmymacX有必要买吗

当我们遇到mac电脑出现卡顿的情况&#xff0c;首先应排除是否是电脑硬件的问题&#xff0c;可以通过重启电脑来检测是否硬盘或程序是否发生错误。其次对电脑进行全面的健康检测&#xff0c;找到具体卡顿问题。 磁盘空间不足是导致电脑运行缓慢的常见原因之一。定期清理不需要的…

PMBOK® 第六版 项目经理的角色

项目经理普遍是一个责任大但权力有限的角色&#xff0c;是一个综合的中层领导者&#xff0c;负责项目从启动到收尾的全过程。他需要整合项目管理的各个方面&#xff0c;以确保项目目标的实现&#xff0c;并满足相关方的期望和需求。在工作中&#xff0c;项目经理大部分时间都用…

【面试干货】杨辉三角形

【面试干货】杨辉三角形 1、实现思想2、代码实现 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 杨辉三角形&#xff08;也称帕斯卡三角形&#xff09;是一个规则的数字三角形&#xff0c;它的构造方法是&#xff0c;第一行只有一个数字1&a…

SQL Server基础学习笔记

SQL Server基础学习笔记 SQL Server简介 SQL Server是微软开发的一种关系数据库管理系统&#xff08;RDBMS&#xff09;。它是一个功能强大且广泛使用的数据库平台&#xff0c;支持存储、管理和检索数据&#xff0c;并提供各种工具和功能来提高开发和管理效率。 安装与配置 …

麻省理工出品!这个自动化神器让你的电脑自己工作

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

建议收藏 | 2023年生物学类SCI期刊影响因子最新预测,Molecular Plant遥遥领先

公众号&#xff1a;生信漫谈&#xff0c;获取最新科研信息&#xff01; 建议收藏 | 2023年生物学类SCI期刊影响因子最新预测&#xff0c;Molecular Plant遥遥领先https://mp.weixin.qq.com/s/tFINUzZ1l4H9x1HWTq1kFg 2023年生物学类SCI期刊影响因子最新预测&#xff0c;Molecu…

大佬大讲堂(1)电机及其驱动内核-自适应观察器

点击上方 “机械电气电机杂谈 ” → 点击右上角“...” → 点选“设为星标 ★”&#xff0c;为加上机械电气电机杂谈星标&#xff0c;以后找夏老师就方便啦&#xff01;你的星标就是我更新动力&#xff0c;星标越多&#xff0c;更新越快&#xff0c;干货越多&#xff01; 关注…

React 中的jsx 的语法使用

react 中是使用 JSX 编写标签的 它是可选的&#xff0c;但大多数 React 项目会使用 JSX&#xff0c;主要是它很方便。所有 我们推荐的本地开发工具 都开箱即用地支持 JSX。 JSX 比 HTML 更加严格。你必须闭合标签&#xff0c;如 <br />。你的组件也不能返回多个 JSX 标…

冷干机使用中的注意事项

冷干机使用中的注意事项 使用冷干机时&#xff0c;以下是几个注意事项&#xff1a; 安装位置&#xff1a;选择一个通风良好、温度适宜的位置安装冷干机。确保周围环境没有过多的灰尘、腐蚀性气体或其他污染物&#xff0c;以免对冷干机的正常运行和寿命产生不利影响。 电源要求…

高效使用 LaTeX 技巧

但对于一般人而言&#xff0c;你不需要通过学习 Vim 来达到高效编辑 LaTeX 的方式。而是通过一些比较容易实现的方式&#xff0c;使得你能够在原来的基础上更加高效得使用 LaTeX&#xff0c;并达到以思考的速度输入 LaTeX 的方式。 在第一部分&#xff0c;我会首先介绍高效编辑…

IPKISS ------ AMF 添加自定义层

IPKISS ------ AMF 添加自定义层 正文 正文 很多时候&#xff0c;我们想要添加属于我们自己的层&#xff0c;此时我们需要向 AMF pdk 中的 gdsii.py 和 layers.py 文件添加层的信息。这两个文件的目录如下&#xff1a; 在 gdsii.py 文件下的 TECH.GDSII.LAYERTABLE 字典中我们…

JVM学习-垃圾收集器(三)

G1回收器-区域化分代式 为了适应不断扩大的内存和不断增加的处理器数量&#xff0c;进一步降低暂停时间&#xff0c;同时兼顾良好的吞吐量官方给G1设定的目标&#xff1a;延迟可控的情况下获得尽可能高的吞吐量&#xff0c;所以才担当起“全功能收集器”的重任与期望G1是一款面…

篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)

篮球论坛系统 目录 基于SprinBootvue的篮球论坛系统 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2管理员功能模块 3用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff…

ASP+ACCESS教师档案管理系统

3.1 系统功能模块图 3.2 E&#xff0d;R模型图 3.3 系统使用流程图 3.4 各个模块功能简介&#xff1a; 本系统分为五个功能模块&#xff0c;它们分别是教师信息录入模块、教师信息修改模块、教师信息查询模块、教师信息打印模块。 下面分别介绍各个模块的功能用途&#x…

AI赋能银行业务新突破:合合信息助力银行流水智能识别系统

官.网地址&#xff1a;合合TextIn - 合合信息旗下OCR云服务产品 在银行零售与对公业务中&#xff0c;流水单作为分析申请人财务情况的重要材料&#xff0c;是银行业务的重要数据来源。小微企业也常常使用流水代替财报&#xff0c;用以反映企业的财务与经营情况。如何高效地识别…

LoFTR 笔记和理解

文章目录 解决什么实际问题&#xff1f;算法结构 解决什么实际问题&#xff1f; 主要是解决传统特征匹配和之前的基于深度学习特征匹配不稳定和不准确的问题。传统的特征匹配方法主要依赖于特征点的检测&#xff0c;如果特征点的检测出现问题&#xff0c;比如某一些的关键点没…

Unity Physics入门

概述 在unity中物理属性是非常重要的&#xff0c;它可以模拟真实物理的效果在unity中&#xff0c;其中的组件是非常多的&#xff0c;让我们来学习一下这部分的内容吧。 Unity组件入门篇总目录----------点击导航 Character Controller(角色控制) 说明&#xff1a;组件是Unity提…

元年科技数据智能研发部负责人张亚东受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 北京元年科技股份有限公司数据智能研发部负责人张亚东先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“大模型时代&#xff0c;AI创新型工具提升项目管理效率”。大会将于6月29-30日在北京举办&#xff0c;敬请关注&a…