微信小程序怎么實現text文本的展開與收起

這篇文章主要介紹了微信小程序怎么實現text文本的展開與收起 的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序怎么實現text文本的展開與收起 文章都會有所收獲，下面我們一起來看看吧。

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

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

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

.pay-hint-content{margin-left: 5%;margin-right: 5%;margin-top: 10px;font-size: 13px;color: #888;display: -webkit-box;-webkit-box-orient:vertical;text-overflow: ellipsis;overflow:hidden; // 通過以上四行實現收縮功能}.ellipsis{-webkit-line-clamp:3; // 最多顯示3行opacity: 0.75 // 透明度75%}.unellipsis{-webkit-line-clamp:0; // 全部顯示opacity: 1 // 不透明}

這里需要注意的有overflow：hidden

我們再看看js：

Page({data: {ellipsis: true, // 文字是否收起，默認收起},/*** 收起/展開按鈕點擊事件*/ellipsis: function () {var value = !this.data.ellipsis;this.setData({ellipsis: value})},

關于“微信小程序怎么實現text文本的展開與收起 ”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序怎么實現text文本的展開與收起 ”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。