快速纪录：有赞 Vant van-list组件的坑之：load 事件莫名连续触发两次

废话不说，直接上例子

<template>
  <div>
    <van-list
      class="img-container"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <img class="img" src="@/assets/test-images/intor.png" v-for="item in list" :key="item" />
    </van-list>
  </div>
</template>


<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false
    };
  },

  methods: {
    onLoad() {
      console.log("触发onload事件");

      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    }
  }
};
</script>

<style lang="scss">
.img-container {
  padding: 15px;
  background: #fff;
}
.img {
  width: 100%;
}
</style>

看到我的例子，基本和官方的例子差不多，只不过把 van-cell 改成 img

但是就是连续触发了两次。

解决方案

后来我想到图片是有异步加载过程，当图片没到onload事件时候，它没渲染出来，宽高只有0，0。vant 的触底事件判断又在此之前。就会瞬间判断没填满当前空间，就会立刻又加载一次

方法：css加个最小高度 min-height: 100px

<style lang="scss">
.img-container {
  padding: 15px;
  background: #fff;
}
.img {
  width: 100%;
  min-height: 100px  // 限制最小高度
}
</style>

来句粗话歇歇气：又tm坑了我一把