（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樣式：

.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;}}

標題?title?就是一個簡單的flex布局； 內容?content?中的文字我們默認收起狀態且只展示兩行

（3）這樣我們就實現了一個默認布局樣式

轉存失敗重新上傳取消

收起狀態

添加點擊事件

（1）首先我們應該在?data?中定義一個變量?isShow?用來控制樣式的切換，默認為收起狀態（即不展示）。

data = {isShow: false};

（2）在箭頭icon上添加一個點擊事件，當點擊的時候對?isShow?做取反操作；

toggle() {this.isShow = !this.isShow;this.$apply();}

樣式動態切換

（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;}

小結

這樣我們就實現了文本框的展開/收起效果，當收起的時候顯示省略號并隱藏，當展開的時候展示全部文字。

當然，不僅僅是文字的收起與展開，里面放其它的內容也是可以的，根據需求來應對了；還有就是可以加個動畫之類的完善一下交互效果，感興趣的朋友可以自己鼓搗。

總結

以上是生活随笔為你收集整理的微信小程序实现展开/收起的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。