我们先来看看
wxml
<view class="appraise-content">
<text class="evaluate-content {{ellipsis? 'ellipsis': 'unellipsis'}}">日期;约会;年代;枣椰子;过时;注明日期;始于(某一历史时期);确定…年代;和…约会;(Date)人名;(日)伊达 (姓);(英)戴特;日期;约会;年代;枣椰子;过时;注明日期;始于(某一历史时期);确定…年代;和…约会;(Date)人名;(日)伊达 (姓);(英)戴特;日期;约会;年代;枣椰子;过时;注明日期;始于(某一历史时期);确定…年代;和…约会;(Date)人名;(日)伊达 (姓);(英)戴特;日期;约会;年代;枣椰子;过时;注明日期;始于(某一历史时期);确定…年代;和…约会;(Date)人名;(日)伊达 (姓);(英)戴特;</text>
<image class="difference-img content-jian" bindtap="ellipsis" src="{{ellipsis?'../../../img/icon/icon-descend.png': '../../../img/icon/icon-up.png'}}"></image>
</view>
wxss
.appraise-content {
font-size: 30rpx;
/* font-weight: 500; */
}
.evaluate-content {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
.ellipsis {
-webkit-line-clamp: 5;
opacity: 0.75;
}
.unellipsis {
-webkit-line-clamp: 0;
opacity: 1;
}
.content-jian {
float: right;
}
.appraise-img {
margin: 40rpx 0 0;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
ellipsis: true,
},
ellipsis: function() {
let value = !this.data.ellipsis;
this.setData({
ellipsis: value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
最后给大家看一下效果图吧