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

最新推荐文章于 2024-07-31 23:45:00 发布

撑起自己半边天

最新推荐文章于 2024-07-31 23:45:00 发布

阅读量1w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue vant 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_43840289/article/details/130685548

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

vant

3 篇文章

订阅专栏

文章讲述了vant-list的onload事件不触发的两个常见原因及相应的解决策略。一是由于父元素或祖先元素设置了100%或100vh的高度，解决方法是调整为小于100%的高度并添加overflow-y:auto。二是切换tab时onload未触发，可以通过清空list、重新设置加载状态并调用onLoad来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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