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