百度小程序點擊展開查看剩餘更多

顯示三行，點擊更多展開下面其他的

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
        })
    },
})