关于微信小程序文本展开/收起功能的操作教程分享

【春哥博客技术教程分享】在开发微信小程序的过程中,经常会需要各种方便一点的功能,春哥团队技术大东在操作过程中就经常遇到,比如:有时候文本需要实现这样的功能: 
1、文本超过n行显示省略号; 
2、省略时,显示 展开/收起 按钮; 
3、文本不超过n行时,不显示省略号和展开/收起按钮。

关于<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>文本展开/收起功能的操作教程分享

实现思路

文本过长显示省略号、展开和收起功能,通过css样式即可实现 
判断是否显示展开/收起按钮: 
通过嵌套元素,可以实现text既显示省略号,其高度又是全显示时的高度 
通过SelectorQuery选择器,获取text及其父元素的高度,判断text高度是否超过其父元素高度,决定是否显示展开/收起按钮即可

代码

wxss


 
  1. .frame {
  2. width: 100%;
  3. max-height: 206rpx;
  4. text-align: left;
  5. display: -webkit-box;
  6. overflow: hidden;
  7. text-overflow: ellipsis;
  8. word-wrap: break-word;
  9. white-space: normal !important;
  10. -webkit-line-clamp: 3;
  11. -webkit-box-orient: vertical;
  12. }
  13. .nofold {
  14. display: block;
  15. text-overflow: unset;
  16. -webkit-line-clamp: unset;
  17. max-height: unset;
  18. }

frame样式设置最大高度,超过3行后出现省略号。overflow为hidden,使得text的超出父元素部分隐藏掉。nofold样式则将最大高度、出现省略号的行数去除,以展示全文。

wxml

  1. <view id="frame" class='frame {{fold == false ? "nofold":""}}'>
  2. <text id="content">{{detail}}</text>
  3. </view>

wxml中,在view元素中嵌套text元素。样式写在view中,text不加任何样式(重要)。分别写上id,方便js代码获取其尺寸信息。 
javascript

  1. var query = this.createSelectorQuery();
  2. query.select('#content').boundingClientRect();
  3. query.select('#frame').boundingClientRect();
  4. query.exec(function(res) {
  5. if (res[0] && res[0].height) {
  6. if (res[0].height > res[1].height) {
  7. self.setData({
  8. fold: true,
  9. });
  10. } else {
  11. self.setData({
  12. fold: null,
  13. });
  14. }
  15. }
  16. })

js代码中,通过选择器获取两者的高度,如果text高度高于view,则说明有省略文本,显示展开/收起按钮。 
js的选择器如果是写在onshow/onload方法中,最好加上延迟,以防止出现判断时元素尚未渲染出来的情况。


今天就和大家分享到这里,如果有更多关于小程序开发的问题欢迎到春哥技术源码论坛区留言、探讨。
 

来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:如何在微信小程序中写一个自定义尺寸      下一篇:很抱歉没有了