小程式 — 展開/收起
摘要：
前言：本章說下文字內容的展開與收起的實現，要實現這麼一個效果：當收起的時候隱藏並顯示省略號，當展開的時候顯示全部文字。
GitHub： https://github.com/Ewall1106/miniProgramDemo
先看下效果圖：
小...
前言：本章說下文字內容的展開與收起的實現，要實現這麼一個效果：當收起的時候隱藏並顯示省略號，當展開的時候顯示全部文字。
GitHub： ofollow,noindex">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中的文字我們預設收起狀態且只展示兩行，更多css技巧：CSS日常踩坑後的總結
.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、小結
- 這樣我們就實現了文字框的展開/收起效果，當收起的時候顯示省略號並隱藏，當展開的時候展示全部文字。
- 當然，不僅僅是文字的收起與展開，裡面放其它的內容也是可以的，根據需求來應對了；還有就是可以加個動畫之類的完善一下互動效果，感興趣的朋友可以自己鼓搗。