van-swipe初始高度异常留白BUG处理

 v-lazy 会导致van-swipe初始高度异常

<van-swipe :autoplay="3000"> <van-swipe-item v-for="(image, index) in images" :key="index"> <img v-lazy="image" /> </van-swipe-item> </van-swipe>

van-swipe初始高度异常BUG处理 方案一：不使用懒加载模式 具体应用如下：

<van-swipe autoplay="3000" class="banner-box" indicator-color="white"> <van-swipe-item v-for="(item, index) in imgData" :key="index" > <img :src="item.src"/> </van-swipe-item> </van-swipe> 

van-swipe初始高度异常BUG处理 方案二：获取图片高度 动态添加style使高度自适应

因为初始第一下  图片没加载完成 所以给图片添加@load 在@load时获取图片高度

<van-swipe :autoplay="3000" :style="{ height: `${imgSize}px` }"> <van-swipe-item v-for="(image, index) in images" :key="index"> <img @load="loadingImg" v-lazy="image" ref="img" /> </van-swipe-item> </van-swipe>

动态获取图片高度

data() { return { imgSize: Number, } }, methods: { loadingImg() { this.imgSize = this.$refs['img'][0].offsetHeight }, },

解析：

• 通过this.$refs.name来获取会报错：一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来获取内容就会出现xxx is undefined的错误 因为ref本身是作为渲染结果被创建的，在渲染的时候是不能访问的，因为他们还不存在！ 如果此时代码是需要这样来写代码，那么你可以在DOM渲染完毕后再进行获取

this.$nextTick(() => { this.$refs.name... //DOM渲染完毕后就能正常获取了 })

• 动态绑定ref并使用v-for，使用this.$refs[refName]无法获取ref 原因如下：
• 设置ref在v-for列表上，直接获取this.$refs.name.style，永远是空的

1. 这是vue的特性,自动把v-for里面的ref展开成数组的形式.
2. 假设你的ref不是动态的,而是静态的 ， ref="a"，
3. 那么不管你执行多少次循环,最后ref只会有一个值,
4. 所以vue为了处理这种情况会把v-for里ref
5. 转为数组形式，为了能捕捉所有的ref值
6. 因为this.$refs.name是一个数组，无法通过 .style 获取样式
7. 只能遍历这个this.$refs.name数组 在this.$refs.name[index]上设置样式 
8. 但是像高度宽度，可以通过offsetHeight，等来获取。

• 解决:将this.$refs[refName]改为this.$refs[refName][0]即可

vue使用this.$refs.xx在mounted中获取DOM元素为undefined

vue 中 this.$refs.name.offsetHeight 获取不到值（进阶版）

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rgzn-zryycl/11120.html