概述

微信小程序通过接口获取富文本数据内容通过rich-text组件标签进行渲染到页面由于内容展示过长，进行展开收起效果实现，减少用户因内容过多，产生不好的用户体验！通过一下方法实现页面的展开收起。

details.wxml

<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>

details.JS

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
        })
    },
})

details.wxml

.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;
}