青岛手机网站建设,重庆市建设工程信息服务平台,尚海整装为啥口碑那么差,wordpress游客留言需求#xff1a;轮播图swiper根据内容图片高度自适应
但是通过uniapp uni.createSelectorQuery的方法获取图片高度不正确#xff0c;比如图片是100#xff0c;获取是200#xff0c;this.$nextTick也不能解决#xff0c;setTimeout到是能解决#xff0c;但是不稳定#…需求轮播图swiper根据内容图片高度自适应
但是通过uniapp uni.createSelectorQuery的方法获取图片高度不正确比如图片是100获取是200this.$nextTick也不能解决setTimeout到是能解决但是不稳定有时200ms能正确有时不能再设置久一点用户体验不好图片等待时间太久了
研究了一下图片加载完成时间load里也能e.detail.height获取图片高度但返回的图片高度还是不正确太坑了但load里再使用uni.createSelectorQuery的方法获取图片高度则正确了
templateswiper classswiper changeviewChange :autoplaytrue circular :indicator-dotsfalse v-ifimgsList.length :style[{ height: swiperHeight px }]swiper-item v-foritem in imgsList :keyitem.idview classswiper-item uni-bg-red clickclickBreak(item)image :srcitem.clientFileUrl modewidthFix classimg loadloadImg/image/view/swiper-item/swiper
/templatescript
export default {name: swiperImg,props: {imgsList: Array,},data() {return {swiperHeight: 0,current: 0,};},methods: {loadImg() {this.getCurrentSwiperHeight(.img);},// 轮播切换viewChange(e) {this.current e.target.current;this.getCurrentSwiperHeight(.img);},// 动态获取内容高度getCurrentSwiperHeight(element) {let query uni.createSelectorQuery().in(this);query.selectAll(element).boundingClientRect();query.exec((res) {// 切换到其他页面swiper的change事件仍会触发这时获取的高度会是0会导致回到使用swiper组件的页面不显示了if (this.imgsList.length res[0][this.current].height) {this.swiperHeight res[0][this.current].height;}});},},
};
/scriptstyle langscss scoped
.swiper {padding: 0 20rpx;margin-top: 5px;margin-bottom: 1px;border-radius: 4px 4px 4px 4px;.swiper-item {width: 100%;image {width: 100%;}}
}
/style
