商城系統(tǒng) 注冊

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

2020-09-27|HiShop
導(dǎo)讀:小程序如果頁面中有一段說明文字,要求默認(rèn)收起,只展示3行;點(diǎn)擊按鈕可以查看完整內(nèi)容。那么要如何實(shí)現(xiàn),以下就為大家解答...


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

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

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

先看看布局文件,關(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步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請查看:小程序商店

電話咨詢 預(yù)約演示 0元開店