微信小程序 场景是从接口获取一组图片,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;
    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();
      }

    })
  },

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值