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()
}

如果你有更好的方法,请告知,感谢!

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐