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()
}
如果你有更好的方法,请告知,感谢!
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)