uniapp小程序超出一行显示...并展示更多按钮

news/2024/7/20 0:47:05 标签: uni-app, 小程序, 前端, javascript, html
htmledit_views">

注意:全部标签需要浮动在父盒子右边哦

循环获取所有需要展示数据标签的高度

html" title=javascript>javascript">this.goods = this.goods.map(item => ({
						...item,
						showBtn: false
					}));
					this.$nextTick(() => {
						uni.createSelectorQuery().in(this).selectAll(".cart-info").boundingClientRect(
							(data) => {
								if (data.length > 0) {
									this.goods.forEach((item, index) => {
											item.showBtn = data[index].height > 20;
									})
								}
							}).exec();
					})

控制显示信息数据的行数(默认是自动换行 高度超过20的话就不换行省略并且添加全部按钮)

html" title=javascript>javascript"><text class="cart-info"
										:style="{'-webkit-line-clamp':good.showBtn?1:2}">适配车型:{{good.vehicleTypeMemo}}</text>
									<text v-if="good.showBtn" class="checkmore" @click="checkMoreBtn(good)">更多</text>

标签的样式

.cart-info {
			width: calc(100% - 50rpx);
			line-height: 30rpx;
			word-break: break-all; //换行模式
			overflow: hidden;
			text-overflow: ellipsis; //修剪文字,超过2行显示省略号
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}


http://www.niftyadmin.cn/n/5320702.html

相关文章

Redis原理篇(Dict的收缩扩容机制和渐进式rehash)

Dict&#xff08;即字典&#xff09; Redis是一种键值型数据库&#xff0c;其中键与值的映射关系就是Dict实现的。 Dict通过三部分组成&#xff1a;哈希表&#xff08;DictHashTable&#xff09;&#xff0c;哈希节点(DictEntry)&#xff0c;字典&#xff08;Dict&#xff09…

【漏洞复现】Office365-Indexs-任意文件读取

漏洞描述 Office 365 Indexs接口存在一个任意文件读取漏洞,攻击者可以通过构造精心设计的请求,成功利用漏洞读取服务器上的任意文件,包括敏感系统文件和应用程序配置文件等。通过利用此漏洞,攻击者可能获得系统内的敏感信息,导致潜在的信息泄露风险 免责声明 技术文章…

实战 php 使用 wkhtmltopdf 生成pdf的全过程

公司里边有生成pdf报告的业务需求,之前有过尝试用tcpdf,直接生成的pdf的过程,但是pdf报告的内容数据,根据不同内容的变化,都是各种各样的bug,一直处理修修补补的状态,让后台开发人员很是头疼. 经过思索和甄选,总结出我们的业务中是由于样式不可控导致的,当时从逻辑上就思考到用…

网络安全产品之认识防火墙

防火墙是一种网络安全产品&#xff0c;它设置在不同网络&#xff08;如可信任的企业内部网和不可信的公共网&#xff09;或网络安全域之间&#xff0c;通过监测、限制、更改跨越防火墙的数据流&#xff0c;尽可能地对外部屏蔽网络内部的信息、结构和运行状况&#xff0c;以此来…

Windows安全基础:UAC

目录 UAC原理介绍 UAC的四个安全级别定义 UAC的触发条件 UAC用户登录过程 UAC虚拟化 配置UAC UAC原理介绍 用户账号控制&#xff08;User Account Control&#xff09; 为Windows Vista推出的一项安全技术&#xff0c;其原理是通过限制安全应用软件对系统层级的访问&…

数据结构中的一棵树

一、树是什么&#xff1f; 有根有枝叶便是树&#xff01;根只有一个&#xff0c;枝叶可以有&#xff0c;也可以没有&#xff0c;可以有一个&#xff0c;也可以有很多。 就像这样&#xff1a; 嗯&#xff0c;应该是这样&#xff1a; 二、一些概念 1、高度 树有多高&#x…

Netty开篇——NIO章上(三)

Java NIO基本介绍 java non-blocking I/O 称为NIO(也叫New IO)。JDK4开始提供,同步非阻塞相关内容在 java.nio 包及子包下&#xff0c;对java.io 包中的很多类进行改写。三大核心: Channel(通道)&#xff0c;Buffer(缓冲区),Selector(选择器)NIO是面向缓冲区或者面向块编程的。…

【Webpack】预处理器 - loader配置介绍

预处理器 (loader) &#xff0c;的主要功能是赋予了 Webpack 可处理不同资源类型的能力&#xff0c;极大丰富了其可扩展性。 一个Web工程通常会包含HTML、JS、CSS、模板、图片、字体等多种类型的静态资源&#xff0c;并且这些资源之间都存在着某种联系。对于 Webpack 来说&…