效果图
1569036268(1).jpg
1.WXML
{{item.text}}
{{item.collapse?'全文':'收起'}}
2.JS
Page({
data: {
list: [{
text: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文'
},
{
text: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章'
},
{
text: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章'
}
],
},
onShow: function(){
this.setCollapse()
},
//判断全文收起是否展示
setCollapse: function() {
var query = wx.createSelectorQuery();
var that = this;
query.selectAll('.text').boundingClientRect(function (rect) {
rect.forEach((v, i) => {
if (v.height > 45) { //判断高度,根据各种高度取折中
var set = "list[" + i + "].collapse";
var set1 = "list[" + i + "].showCollapse";
that.setData({
[set]: true,
[set1]: true,
})
}
})
}).exec();
},
//点击全文收起
changeCollapse: function(e){
var index = e.currentTarget.dataset.index;
var set = "list[" + index + "].collapse";
this.setData({
[set]: !this.data.list[index].collapse
})
}
})
3.WXSS
.list-box{
padding: 0 30rpx;
}
.list-box .list{
border-bottom: 1rpx solid #e3e3e3;
padding: 30rpx 0;
}
.list-box .list text{
font-size: 28rpx;
line-height: 40rpx;
display: block;
}
.list-box .list text.text-collapse{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow: hidden;
text-overflow: ellipsis;
}
.list-box .coll-p{
font-size: 30rpx;
color: #5064A3;
margin-top: 10rpx;
}