微信小程序中,有时候文本需要实现这样的功能
1、文本超过n行显示省略号
2、省略时,显示 展开/收起 按钮
3、文本不超过n行时,不显示省略号和展开/收起按钮
实现思路
文本过长显示省略号、展开和收起功能,通过css样式即可实现
判断是否显示展开/收起按钮:
通过嵌套元素,可以实现text既显示省略号,其高度又是全显示时的高度
通过SelectorQuery选择器,获取text及其父元素的高度,判断text高度是否超过其父元素高度,决定是否显示展开/收起按钮即可
代码
wxss
.frame {
width: 100%;
textalign left;
overflow hidden;
wordwrap breakword;
lineclamp3;
}
block unset}
frame样式设置最大高度,超过3行后出现省略号。overflow为hidden,使得text的超出父元素部分隐藏掉。nofold样式则将最大高度、出现省略号的行数去除,以展示全文。
wxml
<view id="frame"class'frame {{fold == false ? "nofold":""}}'>
</view>
wxml中,在view元素中嵌套text元素。样式写在view中,text不加任何样式(重要)。分别写上id,方便js代码获取其尺寸信息。
javascript
var query =thiscreateSelectorQuery();
).boundingClientRect();
();
if[0]&& res].{
selfsetData({
});
({
});
}
js代码中,通过选择器获取两者的高度,如果text高度高于view,则说明有省略文本,显示展开/收起按钮。
js的选择器如果是写在onshow/onload方法中,最好加上延迟,以防止出现判断时元素尚未渲染出来的情况。