1.WXML:
<view class='desc'>
<view class="content {{isFolded?'hide':'show'}}">
<text >{{description}}</text>
</view>
<!--切换 -->
<view wx:if="{{widgetHeight <120}}" bindtap="foldChange" class="state">{{isFolded?'展开':'收起'}}</view>
</view>
2.WXSS:
.desc {
padding-top: 35rpx;
padding-bottom: 60rpx;
width: 100%;
background: white;
}
.content {
/* 首行缩进8% */
text-indent: 8%;
/* height: 500rpx; */
font-family: '微软雅黑';
width: 90%;
margin: 0 auto;
font-size: 28rpx;
line-height: 50rpx;
background-color: white;
/*关键属性(必须有的) */
display: -webkit-box;
/*规定子元素的排列方向 */
-webkit-box-orient: vertical;
/* 当溢出是隐藏 */
overflow: hidden;
text-overflow: ellipsis;
}
.hide {
-webkit-line-clamp: 4;
/* 透明度,半透明 */
opacity: 0.75;
}
.show {
-webkit-line-clamp: 0;
opacity: 1;
}
.state {
color: cyan;
float: right;
font-size: 30rpx;
margin-right: 30rpx;
margin-top: 5rpx;
}
3.JS:
Page({
data: {
isFolded: true,
description:'',//
},
// ==========改变点击状态=================
foldChange: function(e) {
this.setData({
isFolded: !this.data.isFolded,
})
},
})