vant list列表onload不触发原因及解决方法

vant list列表onload不触发原因及解决方法

原因1：
van-list 的父元素或者祖祖祖…元素或者html、body其中有一个的高度height设置了100%或者100vh。
示例：

<template>
  <div class="homebox" ref="scrollview">
    <vue-scroll
      :ops="{ bar: { opacity: 0 } }"
      style="height: 100vh;"
      >
      <!-- 这里是包含 vant-list 的页面的父组件的父组件 -->
     </vue-scroll>
  </div>
</template>

因为 vue-scroll 的高度设置为100vh，所以导致下拉触发不了list 的onload事件

解决方法：
1、将设置高度为100%或100vh的父元素改为小于100%即可，且要设置 overflow-y: auto
2、为了不影响其他组件高度，在设置高度为100%或者100vh 的元素里面再写一个包裹有van-list组件的元素并设置样式 ： height:99.9vh（小于100%或者100vh即可）;overflow-y: auto;

<template>
  <div class="homebox" ref="scrollview">
    <vue-scroll
      :ops="{ bar: { opacity: 0 } }"
      style="height: 100vh;"
      >
      <div style="height:99.9vh;overflow-y: auto;">
      <!-- 这里是包含 vant-list 的页面的父组件的父组件 -->
      </div>
     </vue-scroll>
  </div>
</template>

原因2：
当切换tab或者标签时，onload没有触发

解决方法：

tabsChange(){
	this.list= []
    this.loading = true
    this.finished = false
    this.onLoad()
}

如果你有更好的方法，请告知，感谢！