微信小程序：text文本的展开与收起
间隔了几个月，又被拉来做小程序了~~~
页面中有一段说明文字，要求默认收起，只展示3行；点击按钮可以查看完整内容。看了下微信文档，没发现有控件满足要求，于是决定通过js实现
h5 ellipsis.gif
先看看布局文件，关键在与{{ellipsis?'ellipsis':'unellipsis'}}，样式根据js中的ellipsis改变。
|
1 2 3 4 5 6 7 8 |
<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'bg-white marginTop10 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-tille'</span>></span>挂号支付须知<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">"pay-hint-content {{ellipsis?'ellipsis':'unellipsis'}}"</span> ></span>1. 支付成功后，将会推送排队号；就诊当日可直接前往诊室等待叫号就诊，无需再现场缴费、排队。\n2. 已完成支付挂号费用的用户，如在就诊前一日取消预约订单，成功申请取消订单后，正常情况下系统将会在7个工作日内自动退费至用户支付账号内。\n3. 订单在正常状态下（非系统故障、非医生临时停诊）被爽约，由于占用了医院号源，此类订单不予以退费。<span class="hljs-tag"></<span class="hljs-name">text</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'bg-white-ellipsis'</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">'ellipsis'</span>></span> <span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'img-ellipsis'</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{ellipsis?'../images/ellipsis.png':'../images/unellipsis.png'}}"</span>></span><span class="hljs-tag"></<span class="hljs-name">image</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> |
接下来看下css，其他的css都是常规配置，不需要看， 我们看下pay-hint-content及后面的ellipsis与unellipsis：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.pay-hint-content{ margin-left: <span class="hljs-number">5</span>%; margin-right: <span class="hljs-number">5</span>%; margin-top: <span class="hljs-number">10</span>px; font-size: <span class="hljs-number">13</span>px; color: <span class="hljs-meta">#888;</span> display: -webkit-box; -webkit-box-orient:vertical; text-overflow: ellipsis; overflow:hidden; <span class="hljs-comment">// 通过以上四行实现收缩功能</span> } .ellipsis{ -webkit-line-clamp:<span class="hljs-number">3</span>; <span class="hljs-comment">// 最多显示3行</span> opacity: <span class="hljs-number">0.75</span> <span class="hljs-comment">// 透明度75%</span> } .unellipsis{ -webkit-line-clamp:<span class="hljs-number">0</span>; <span class="hljs-comment">// 全部显示</span> opacity: <span class="hljs-number">1</span> <span class="hljs-comment">// 不透明</span> } |
这里需要注意的有overflow：hidden，如果不设置overflow会是神马效果呢？如下图（可以看到厦航文字后，下面的文字还是显示了，只是未占据控件位置而已）：
h5 ellipsis has no overflow.jpg
我们再看看js：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Page({ <span class="hljs-attr">data</span>: { <span class="hljs-attr">ellipsis</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 文字是否收起，默认收起</span> }, <span class="hljs-comment">/** * 收起/展开按钮点击事件 */</span> ellipsis: <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ <span class="hljs-keyword">var</span> value = !<span class="hljs-keyword">this</span>.data.ellipsis; <span class="hljs-keyword">this</span>.setData({ <span class="hljs-attr">ellipsis</span>: value }) }, |
