小程序获取元素高度展示是否展开收起

在这里插入图片描述

let that = this;
    wx.getSystemInfo({
      success: function (res) {
        let clientWidth = res.windowWidth;
        that.setData({
          clientWidth,
        });
      },
    });
    <view class="ly-dy-pj-box">
          <view id="content" class="content ly-dy-pj-zk {{!item.isShow? 'ly-dy-sq':''}}"
            >{{item.content}}
          </view>
          <view class="" style="overflow: hidden">
            <view
              class="ly-pj-aps"
              wx:if="{{!item.isbtns?true:false}}"
              bindtap="cliShow"
              data-item="{{item}}"
              data-index="{{index}}"
              >{{!item.isShow?'展开':'收起'}}
              <van-icon name="{{!item.isShow?'arrow-down':'arrow-up'}}" />
            </view>
          </view>
          <view class="ly-dy-pl-tx" style="margin-top: 16rpx"
            ><text class="" style="color: #5b9e38">回复:</text>{{item.reply}}
            <!-- <view wx:if="{{item.reply.length >= 67?true:false}}"
              >{{item.isShow?'展开':'收起'}}<van-icon
                name="{{item.isShow?'arrow-down':'arrow-up'}}"
              />
            </view> -->
          </view>
        </view>
.ly-dy-pj-box {
      font-size: 26rpx;
      color: #999999;
      line-height: 37rpx;
      position: relative;

      .ly-dy-pj-zk {
        overflow: none;
        display: block;
        word-wrap: break-word;
        word-break: break-all;
      }

      .ly-pj-aps {

        float: right;
        padding: 5rpx 0 0 8rpx;
        background-color: #fff;
        z-index: 99;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 37rpx;
      }



      .ly-dy-pl-tx {
        position: relative;
        overflow: none;
        display: block;


        .ly-pj-aps {
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 5rpx 0 0 8rpx;
          width: 75rpx;
          background-color: #fff;
          z-index: 99;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 37rpx;
        }

        word-wrap: break-word;
        word-break: break-all;
      }

      .ly-dy-sq {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; //这儿的数字代表的就是你所需要实现效果的第N行
        -webkit-box-orient: vertical;
        word-wrap: break-word;

      }
    }
getContText() {
    const query = wx.createSelectorQuery();
    query
      .selectAll('#content')
      .boundingClientRect((res) => {
        res.forEach((item, index) => {
          let clientHeight = item.height;
          let { clientWidth } = this.data;
          let ratio = 750 / clientWidth;
          if (ratio * 18 * 3 < clientHeight * ratio) {
            let str = `evaluationList[${index}].isShow`;
            let btnStr = `evaluationList[${index}].isbtns`;
            this.setData({
              [str]: false,
              [btnStr]: false,
            });
          }
          let height = (clientHeight * ratio).toFixed(2);
          console.log(height);
        });
        // this.setData({
        //   contTextHeight: data,
        // });
        // that.hei = data.height;
      })
      .exec();
  },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值