廢話不多說奇颠，直接上代碼
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)容合作請聯(lián)系作者
