最近在写个功能根据当前图片dom高度,swiper组件自适应,但会遇到对应的api获取高度有时返回值height是0,或者返回[null]不好去判断走默认的高度,解决方法就是try catch 代码如下:
onLoad() {
setTimeout(() => {
this.$nextTick(() => {
this.setSwiperHeight(); // 动态设置 swiper 的高度
})
}, 200)
}
setSwiperHeight() {
const element = "#wrap0";
const query = uni.createSelectorQuery().in(this);
query.select(element).boundingClientRect();
query.exec(res => {
console.log(element, res,res.length, 'dddsa')
try{
if (res[0].height) {
this.swiperHeight = res[0].height;
} else {
this.swiperHeight = 450
}
}catch{
this.swiperHeight = 450
}
});
},
<swiper class="img" indicator-dots="true" indicator-color="rgba(255,252,255, .3)" :current="currIndex"
indicator-active-color="rgba(255,252,255, .6)" autoplay="true" circular="true"
:style="{ height: swiperHeight + 'px' }">
<swiper-item v-for="(imgItem, imgIdx) in imgUrlList" :key="imgIdx" class="item">
<image :id="'wrap' + imgIdx" :src="picDomain+imgItem" mode='widthFix'> </image>
</swiper-item>
</swiper>