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()
}
如果你有更好的方法,请告知,感谢!