微信小程序?qū)崿F(xiàn)text文本的展開與收起

小程序如果頁面中有一段說明文字，要求默認(rèn)收起，只展示3行；點(diǎn)擊按鈕可以查看完整內(nèi)容。那么要如何實(shí)現(xiàn)，以下就為大家解答

先看看布局文件，關(guān)鍵在與{{ellipsis?'ellipsis':'unellipsis'}}，樣式根據(jù)js中的ellipsis改變。

1. <view class='bg-white marginTop10 vertical'>
2. <text class='pay-hint-tille'>掛號支付須知</text>
3. <text class="pay-hint-content {{ellipsis?'ellipsis':'unellipsis'}}" >1.
4. 支付成功后，將會推送排隊(duì)號；就診當(dāng)日可直接前往診室等待叫號就診，無需再現(xiàn)場繳費(fèi)、排隊(duì)。\n2. 已完成支付掛號費(fèi)用的用戶，如在就診前一日取消預(yù)約訂單，成功申請取消訂單后，正常情況下系統(tǒng)將會在7個工作日內(nèi)自動退費(fèi)至用戶支付賬號內(nèi)。\n3. 訂單在正常狀態(tài)下（非系統(tǒng)故障、非醫(yī)生臨時停診）被爽約，由于占用了醫(yī)院號源，此類訂單不予以退費(fèi)。</text>
5. <view class='bg-white-ellipsis' bindtap='ellipsis'>
6. <image class='img-ellipsis' src="{{ellipsis?'../images/ellipsis.png':'../images/unellipsis.png'}}"></image>
7. </view>
8. </view>

接下來看下css，其他的css都是常規(guī)配置，不需要看， 我們看下pay-hint-content及后面的ellipsis與unellipsis：

1. .pay-hint-content{
2. margin-left: 5%;
3. margin-right: 5%;
4. margin-top: 10px;
5. font-size: 13px;
6. color: #888;
7. display: -webkit-box;
8. -webkit-box-orient:vertical;
9. text-overflow: ellipsis;
10. overflow:hidden; // 通過以上四行實(shí)現(xiàn)收縮功能
11. }
12. .ellipsis{
13. -webkit-line-clamp:3; // 最多顯示3行
14. opacity: 0.75 // 透明度75%
15. }
16. .unellipsis{
17. -webkit-line-clamp:0; // 全部顯示
18. opacity: 1 // 不透明
19. }

這里需要注意的有overflow：hidden

我們再看看js：

1. Page({
2. data: {
3. ellipsis: true, // 文字是否收起，默認(rèn)收起
4. },
5. /**
6. * 收起/展開按鈕點(diǎn)擊事件
7. */
8. ellipsis: function () {
9. var value = !this.data.ellipsis;
10. this.setData({
11. ellipsis: value
12. })
13. },

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店