前言：本章說下文字內容的展開與收起的實現，要實現這么一個效果：當收起的時候隱藏并顯示省略號，當展開的時候顯示全部文字。
GitHub：https://github.com/Ewall1106/miniProgramDemo
先看下效果圖：
小程序 — 展開/收起
1、結構樣式
（1）首先我們定義一下html結構：
<view class="container"> <view class="title"> <text class="title_txt">標題標題</text> <image class="title_icon" src="/assets/images/arrow_up.png" /> </view> <view class="content"> 我所有的自負皆來自我的自卑，所有的英雄氣概都來自于我的軟弱。嘴里振振有詞是因為心里滿是懷疑，深情是因為痛恨自己無情。這世界沒有一件事情是虛空而生的，站在光里，背后就會有陰影，這深夜里一片寂靜，是因為你還沒有聽見聲音。 </view></view>
內容摘抄至馬良《告坦白書》中我一段喜歡的文字。
（2）less樣式：
標題 title 就是一個簡單的flex布局； 內容 content 中的文字我們默認收起狀態且只展示兩行
.container { .title { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 25rpx; .title_txt { font-size: 34rpx; color: #2b2b2b; } .title_icon { display: block; width: 21rpx; height: 11rpx; } } .content { height: 80rpx; overflow: hidden; text-overflow: ellipsis; text-overflow: -o-ellipsis-lastline; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 25rpx; font-size: 30rpx; color: #888888; }}（3）這樣我們就實現了一個默認布局樣式
收起狀態
2、添加點擊事件
（1）首先我們應該在 data 中定義一個變量 isShow 用來控制樣式的切換，默認為收起狀態（即不展示）。
data = { isShow: false}; （2）在箭頭icon上添加一個點擊事件，當點擊的時候對 isShow 做取反操作；
toggle() { this.isShow = !this.isShow; this.$apply();}3、樣式動態切換
（1）首先是image箭頭圖片的切換（注意是如何動態的切換本地圖片的）
<image class="title_icon" src="{{isShow ? '/assets/images/arrow_down.png' : '/assets/images/arrow_up.png'}}" @tap="toggle" />（2）然后我們定義一個展開的樣式，根據isShow的狀態值動態的切換樣式
<view class="content {{isShow ? 'on' : ''}}"> 我所有的自負皆來自我的自卑，所有的英雄氣概都來自于我的軟弱。嘴里振振有詞是因為心里滿是懷疑，深情是因為痛恨自己無情。這世界沒有一件事情是虛空而生的，站在光里，背后就會有陰影，這深夜里一片寂靜，是因為你還沒有聽見聲音。</view>.content.on { display: block; text-overflow: clip; overflow: visible;}4、小結
這樣我們就實現了文本框的展開/收起效果，當收起的時候顯示省略號并隱藏，當展開的時候展示全部文字。
當然，不僅僅是文字的收起與展開，里面放其它的內容也是可以的，根據需求來應對了；還有就是可以加個動畫之類的完善一下交互效果，感興趣的朋友可以自己鼓搗。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
