欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

2021-01-18微信小程序从接口获取一组图片,image mode模式为widthFix显示后计算最高的图片高度赋值给微信的轮播图组件高度

程序员文章站 2022-04-03 22:18:36
...
 <!-- 轮播图 -->
  <view class="tui-banner-bg" wx:if='{{detail.images.length>1}}'>
    <view class="tui-banner-box">
      <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{6000}}" duration="{{250}}" circular="{{true}}"
        indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff"
        bindanimationfinish='bindanimationfinish' style="height:{{swiperHeight}}px"
        class="tui-banner-swiper {{isZero?'is_zero':''}}">
        <swiper-item wx:for="{{detail.images}}" wx:key="index" style="display:flex;align-items:center;">
          <image src="{{item}}" class="tui-slide-image" mode="widthFix" bindtap="handelPreview" data-current="{{item}}"
            id='drawID{{index}}' />
        </swiper-item>
      </swiper>
      <view class="abbox">
        <text>{{current+1}}/</text>
        <text>{{detail.images.length}}</text>
      </view>
    </view>
  </view>
 // 计算节点高度
  calcHeight() {
    const len = this.data.len;
    console.log('len', len)
    let idStr = '';
    //选择id
    for (var i = 0; i < len; i++) {
      let id = '#drawID' + i;
      idStr = idStr + id + ','
    }
    this.handelCalcHeight(idStr);

  },
  handelCalcHeight(idStr) {
    var _this = this;
    const heightArr = this.data.heightArr || [];
    const len = this.data.len;
    wx.createSelectorQuery().selectAll(idStr).boundingClientRect().exec(function (res) {
      let isOk = true; //图片渲染完成标志
      //检验是否渲染完成
      res[0].some(item => {
        if (item.height == 0) {
          isOk = false;
          return true;
        }
      })
      //没通过检验
      if (!isOk) {
        setTimeout(() => {
          _this.handelCalcHeight(idStr);
        }, 10);
        return;
      } else {
        //通过检验
        res[0].forEach(item => {
          heightArr.push(item.height);
        })
        _this.setData({
          heightArr
        })
        console.log(heightArr.length == len);
        console.log('heightArr.length', heightArr.length);
        console.log('len', len);

        if (heightArr.length == len) {
          let height = Math.max(...heightArr);
          _this.setData({
            swiperHeight: height == 0 ? '100' : height,
            isZero: false,
          })
        }
        wx.hideLoading();
      }

    })
  },