显示三行,点击更多展开下面其他的
swan:
<view class="content {{showTotal2 ? 'des' : 'des-short'}}">
as科技大厦来看待静安寺大手大脚卡斯达到啥第六届卡萨丁阿速度快拉赛季打算打算科技大厦大啥打卡机阿萨德鞍山了肯德基阿萨德阿卡丽赛季打算das科技大厦来看待静安寺大手大脚卡斯达到啥第六届卡萨丁阿速度快拉赛季打算打算科技大厦大啥打卡机阿萨德鞍山了肯德基阿萨德阿卡丽赛季打算d
</view>
<view class="btn {{showTotal3 ? 'show' : 'hide'}}" id="swanTap" wx:if="{{showTotal2}}" bindtap="showAll">展开剩余全部
</view>
css :
.des-short {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.show {
display: block;
}
.hide {
display: none;
}
js:
Page({
data: {
showTotal2: false,
showTotal3: true,
},
showAll: function () {
this.setData({
showTotal2: true,
showTotal3: false
})
},
})