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 获取不到值（进阶版）