廢話不多說(shuō),直接上代碼
1、html
<view class="wrap">
<view class="{{ showAll? 'limit box' : 'box'}}">
<view class="{{ showAll? 'unfold' : '' }}">{{ content }}</view>
<view class="pack-up" wx:if="{{ !showAll }}" catchtap="foldAll"> 收起 </view>
<view class="fold-box" wx:if="{{ showAll }}">
<view class="fold"> {{ content }} </view>
<view class="more" catchtap="readMore">查看全文</view>
</view>
</view>
</view>
2、css
.wrap {
padding:30rpx 20rpx;
}
.box {
position: relative;
line-height: 40rpx;
font-size: 14px;
}
.limit {
max-height: 80rpx;
overflow: hidden;
padding-bottom: 40rpx;
}
.unfold {
display: -webkit-box;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.fold-box {
position: absolute;
top: 0;
line-height: 42rpx;
overflow: hidden;
}
.fold {
opacity: 0;
}
.more {
position: absolute;
width: 100%;
top: 80rpx;
font-size: 16px;
color: crimson;
}
.pack-up {
font-size: 16px;
color: green;
}
3、js
data: {
showAll: true,
content:'內(nèi)容'
}
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。