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

 <!-- 轮播图 -->
  <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;//图片数组的长度
    const heightArr = this.data.heightArr || [];
    console.log('len', len)
    var _this = this;
    let idStr = '';
    //选择id
    for (var i = 0; i < len; i++) {
      let id = '#drawID' + i;
      idStr = idStr + id + ','//拼接数组图片的id
    }
    wx.createSelectorQuery().selectAll(idStr).boundingClientRect().exec(function (res) {
      console.log('res', res);
      res[0].forEach(item => {
        heightArr.push(item.height);
      })
      _this.setData({
        heightArr
      })
      console.log(heightArr.length == len)

      if (heightArr.length == len) {//当获取到所有图片的高度，计算最高的高度
        let height = Math.max(...heightArr);
        _this.setData({
          swiperHeight: height == 0 ? '100' : height,
          isZero: false,
        })
      }
      wx.hideLoading();
    })
  },

标签：微信,高度,idStr,len,height,item,heightArr,id,图片
来源： https://blog.csdn.net/weixin_46337813/article/details/112773553