微信小程序通过接口获取富文本数据内容通过rich-text
组件标签进行渲染到页面由于内容展示过长,进行展开收起效果实现,减少用户因内容过多,产生不好的用户体验!通过一下方法实现页面的展开收起。
<view class="lifeOrderDetails-box__img">
<view class="box-img__title">商品详情<view>
<view class="box-img__img {{isDetailsMore?'isDetailsMore':''}}">
<rich-text class="text" nodes="{{details}}"><rich-text>
<view>
<view class="box-business__more" bindtap="changeCollapse" wx:if="{{isDetailsMore}}">展开查看更多
<image src="shouqigengduo@2x.png"><image>
<view>
<view>
Page({
data: {
details: '微信小程序通过接口获取富文本数据内容通过`rich-text`组件标签进行渲染到页面由于内容展示过长,进行展开收起效果实现,减少用户因内容过多,产生不好的用户体验!通过一下方法实现页面的展开收起。微信小程序通过接口获取富文本数据内容通过`rich-text`组件标签进行渲染到页面由于内容展示过长,进行展开收起效果实现,减少用户因内容过多,产生不好的用户体验!通过一下方法实现页面的展开收起。微信小程序通过接口获取富文本数据内容通过`rich-text`组件标签进行渲染到页面由于内容展示过长,进行展开收起效果实现,减少用户因内容过多,产生不好的用户体验!通过一下方法实现页面的展开收起。微信小程序通过接口获取富文本数据内容通过`rich-text`组件标签进行渲染到页面由于内容展示过长,进行展开收起效果实现,减少用户因内容过多,产生不好的用户体验!通过一下方法实现页面的展开收起。',
isDetailsMore:false
},
onShow: function(){
this.setCollapse()
},
判断全文收起是否展示
setCollapse: function() {
var query = wx.createSelectorQuery().in(this);
var that = this;
query.selectAll('.box-img__img').boundingClientRect(function (rect) {
rect.forEach((v, i) => {
if (v.height > 45) { 判断高度,根据各种高度取折中
that.setData({
isDetailsMore: true,
})
}
})
}).exec();
},
点击全文收起
changeCollapse: function () {
this.setData({
isDetailsMore: !this.data.isDetailsMore
})
},
})
.lifeOrderDetails-box__img{
padding: 0 30rpx;
background: #fff;
margin-bottom: 20rpx;
}
.box-img__img.isDetailsMore{
height: 200rpx;
overflow: hidden;
}
.box-img__title{
padding-top: 30rpx;
padding-bottom: 24rpx;
font-weight: bold;
}
.box-img__img rich-text img{
width: 100%;
}
.box-img__img{
padding-bottom:20rpx;
}
.box-img__img .img-img__li{
width: 688rpx;
height: 258rpx;
background-color: #e6e7ea;
border-radius: 16rpx;
margin-bottom: 29rpx;
}
.box-img__img .img-img__li image{
width: 688rpx;
height: 258rpx;
}
.box-business__more{
font-family: PingFang-SC-Medium;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #f9728e;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 22rpx;
padding-top: 22rpx;
margin-bottom: 21rpx;
}
.box-business__more image{
width: 22rpx;
height: 11rpx;
margin-left: 7rpx;
}
本文地址:https://www.zhuimengzhu.com/details/440.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。