2020-08-19小程序 文字展开收起 样式

1597825062(1).jpg 1597825074(1).jpg

data:{
fold:0,
txt:1、完成软件系统后端代码实现，代码易读、注释规范； 2、进行产品的功能定义，辅助完成产品概要设计等相关文档的编写、整理工作； 3、根据设计文档或需求说明，参与测试、验证等工作； 4、负责项目产品的部署实施及培训等相关工作。 岗位基本技能要求： 1、精通Strutsspringhibernate等常用框架； 2、熟
}
<view class="txtshow">
<view id="frame" class="cyytxt {{fold == 1 ? 'nofold':''}}">
<text id="content">{{txt}}</text></view>
<image src="{{fold==1?'/images/up_arrow.png':'/images/Down_arrow.png'}}" class="sq" bindtap="click"></image>
</view>

click:function(){
var query = wx.createSelectorQuery();
let that = this
query.select('#content').boundingClientRect();
query.select('#frame').boundingClientRect();
query.exec(function (res) {
console.log(res)
if (res[0] && res[0].height) {
if (res[0].height > res[1].height) {
that.setData({
fold: 1,
});
} else {
that.setData({
fold: 0,
});
}
}
})
},

.txtshow{
width: 90%;
padding:4%;
font-size: 26rpx;
background: #D7D7D7;
border-radius: 10rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cyytxt{
width: 93%;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.nofold {
display: block;
text-overflow: unset;
-webkit-line-clamp: unset;
max-height: unset;
}