微信小程序文本展开/收起功能

微信小程序中，有时候文本需要实现这样的功能?
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方法中，最好加上延迟，以防止出现判断时元素尚未渲染出来的情况。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!