前言:本章說下文字内容的展開與收起的實作,要實作這麼一個效果:當收起的時候隐藏并顯示省略号,當展開的時候顯示全部文字。
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樣式:
- 标題
就是一個簡單的flex布局;title
- 内容
中的文字我們預設收起狀态且隻展示兩行,更多css技巧:CSS日常踩坑後的總結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、小結
- 這樣我們就實作了文本框的展開/收起效果,當收起的時候顯示省略号并隐藏,當展開的時候展示全部文字。
- 當然,不僅僅是文字的收起與展開,裡面放其它的内容也是可以的,根據需求來應對了;還有就是可以加個動畫之類的完善一下互動效果,感興趣的朋友可以自己鼓搗。