微信小程序：text文本的展开与收起（二）
之前写过一篇《微信小程序：text文本的展开与收起》,通过css控制最大显示行数，后来不少人私信问如果不足三行如何自动隐藏“展开/收起”按钮；我接触这个时间比较短，也不太熟悉，暂时只能想到改为js控制文字长度来处理。
h5 ellipsis.gif
js
js主要定义了四个变量：完整内容content，显示的内容contentShow，收起时最大显示文字长度maxLength，是否收起ellipsis
然后定义了“展开/收起”按钮的点击触发事件ellipsis。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<span class="hljs-comment">/* js */</span> Page({ <span class="hljs-comment">/** * 页面的初始数据 */</span> data: { <span class="hljs-attr">content</span>: <span class="hljs-string">"1. 博客 itlao5.com\n2. 简书 ThinkinLiu"</span>, <span class="hljs-comment">// 完整的内容</span> contentShow: <span class="hljs-string">"1. 博客 i"</span>, <span class="hljs-comment">// 真实显示的内容</span> maxLength: <span class="hljs-number">10</span>, <span class="hljs-comment">// 收起时最大显示文字长度</span> ellipsis: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 是否收缩</span> }, <span class="hljs-attr">ellipsis</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ <span class="hljs-keyword">var</span> ellipsis = !<span class="hljs-keyword">this</span>.data.ellipsis; <span class="hljs-keyword">var</span> contentShow = <span class="hljs-keyword">this</span>.data.content; <span class="hljs-keyword">var</span> maxLength = <span class="hljs-keyword">this</span>.data.maxLength; <span class="hljs-comment">// 如果内容长度少于10，则不截取;否则当处于收起状态，截取7个文字并加上省略号</span> contentShow = (contentShow.length > maxLength && ellipsis) ? contentShow.substring(<span class="hljs-number">0</span>, maxLength - <span class="hljs-number">3</span>) + <span class="hljs-string">"..."</span> : contentShow; <span class="hljs-keyword">this</span>.setData({ <span class="hljs-attr">contentShow</span>: contentShow, <span class="hljs-attr">ellipsis</span>: ellipsis }) }, }) |
wxml
wxml很简单，一个用于展示内容的text，一个展开/隐藏 按钮，需要注意点是hidden='{{content.length<=maxLength}}'，即当文字小于指定长度时，隐藏该按钮
|
1 2 3 4 5 6 |
/* wxml */ <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'bg-white vertical'</span>></span> <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pay-hint-content"</span> ></span>{{contentShow}}<span class="hljs-tag"></<span class="hljs-name">text</span>></span> <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'ellipsis_text'</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">'{{content.length<=maxLength}}'</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">'ellipsis'</span>></span>{{ellipsis?"展开":"收起"}}<span class="hljs-tag"></<span class="hljs-name">text</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> |
wxss
最后，提供下wxml中用到的wxss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<span class="hljs-comment">/* wxss */</span> <span class="hljs-selector-class">.bg-white</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">display</span>: flex; <span class="hljs-attribute">flex-direction</span>: row; <span class="hljs-attribute">background-color</span>: white; } <span class="hljs-selector-class">.vertical</span> { <span class="hljs-attribute">display</span>: flex; <span class="hljs-attribute">flex-direction</span>: column; } <span class="hljs-selector-class">.pay-hint-content</span>{ <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">5%</span>; <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">5%</span>; <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10px</span>; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#888</span>; <span class="hljs-attribute">display</span>: -webkit-box; <span class="hljs-attribute">text-overflow</span>: ellipsis; <span class="hljs-attribute">-webkit-box-orient</span>:vertical; <span class="hljs-attribute">overflow</span>:hidden; } <span class="hljs-selector-class">.ellipsis_text</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">font</span>: <span class="hljs-number">16px</span>; <span class="hljs-attribute">text-align</span>: center } |
原文：简书ThinkinLiu 博客: IT老五
ps：与《微信小程序：text文本的展开与收起》不同，本文方法使通过js控制文本长度，有点是可以实现不足指定文字长度自动隐藏“展开/收起”按钮，不足之处是中英文文字长度不同，以及不同屏幕一行可以显示的文字长度不同，导致会出现文字一行显示不完整的情况。实际中可以根据需求来选择使用哪种方式，或者可以综合两种方式，少于N字隐藏按钮，收起与隐藏根据css实现。
