vant-List-@load事件一直触发
项目场景
今天项目用到vant-List，发现一直触发@load事件。
这是请求的page和pageSize
page: 0, page Size: 10,
后端 测试数据一共21条，但是进入页面就一下请求了三次，全部加载完数据了，这样就达不到要求了。
问题描述
查看了文档底下的常见问题：
为什么会连续触发 load 事件？
如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。因此你需要 调整 每次获取的数据条数， 理想 情况下每次请求获取的数据条数应能够填满一屏高度。
看到这个时候我查看了一下代码，10条的数据量是能够填满一屏的，但是还是直接请求完成了。
往下走：
在 ht ML 、body 上设置 overflow 后一直触发加载？
如果在 html 和 body 标签上设置了overflow-x: hidden样式，会导致 List 一直触发加载。
html,
body {
overflow-x: hidden;
}
这个问题的 原因 是当元素设置了overflow-x: hidden样式时，该元素的overflow-y会被浏览器设置为auto，而不是默认值visible，导致 List 无法正确地判断滚动容器。
解决方法是去除该样式， 或者 在 html 和 body 标签上添加h ei ght: 100%样式。
原因分析
到这里就找到问题的原因了，我习惯在外层 盒子 加上min-height: 100vh;overflow-x:hidden;没想到会影响这个组件，麻了。
解决 方案
去除overflow-x: hidden;或将min-height: 100vh; 改为 height: 100vh;
vant-list onLoad触发以及tab切换不再触发问题
首先 van-list 是首次进就会触发加载的，滚动条滑倒底部不会再触发 一般是因为外部高度未固定导致拿不到滚动条位置
<template>
<div class="listClass" ref="listout">
<van-list v-model="loading" :finished="finished" finished -t ext="没有更多了" @load="onLoad">
<div v-for="( IT em, index) in list" :key="index">{{item}}</div>
</van-list>
</div>
</template>
<script>
export default {
data() {
return {
// 初始化定义
loading: true,
finished: false,
se Arch Data: {
pageSize: 10,
pageNo: 0
},
list: []
}
},
methods: {
onLoad(){
this.searchData.pageNo += 1
this.o BT ai nList()
},
// 列表
obtainList () {
// 调用列表接口(此为演示)
findList(this.searchData).then(res => {
if (res.data.data && res.data.errcode == 0) {
if(this.searchData.pageNo == 1){
this.list = []
}
res.data.data.result.for each ((v) => {
this.list.push(v)
})
this.loading = false
if(this.searchData.pageNo >= res.data.data. total Page) {
this.finished = true
}
}
})
}
}
}
</script>
<style sco PE d>
.listClass {
width: 100%;
height: 100vh;
overflow-y: auto;
}
</style>
tab 切换的时候 需要重置下loading和finished状态
// 切换
activeClick (type) {
this.searchData.active = type
this.searchData.pageNo = 0
this.$refs.listout.scrollTop = 0
this.loading = true
this.finished = false
this.onLoad()
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的 文章 : vue vantUI tab切换时 list组件不触发load事件的问题及解决方法 vant-ui框架的一个bug(解决切换后onload不触发) vant中list的使用以及首次加载触发两次解决问题
总结
以上是 为你收集整理的 vant-List-@load事件一直触发的解决 全部内容，希望文章能够帮你解决 vant-List-@load事件一直触发的解决 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vant-List-@load事件一直触发的解决的详细内容...