vant-List-@load事件一直触发的解决
Delete_89x 人气:0vant-List-@load事件一直触发
项目场景
今天项目用到vant-List,发现一直触发@load事件。
这是请求的page和pageSize
page: 0, pageSize: 10,
后端测试数据一共21条,但是进入页面就一下请求了三次,全部加载完数据了,这样就达不到要求了。
问题描述
查看了文档底下的常见问题:
为什么会连续触发 load 事件?
如果一次请求加载的数据条数较少,导致列表内容无法铺满当前屏幕,List 会继续触发 load 事件,直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数,理想情况下每次请求获取的数据条数应能够填满一屏高度。
看到这个时候我查看了一下代码,10条的数据量是能够填满一屏的,但是还是直接请求完成了。
往下走:
在 html、body 上设置 overflow 后一直触发加载?
如果在 html 和 body 标签上设置了overflow-x: hidden样式,会导致 List 一直触发加载。
html, body { overflow-x: hidden; }
这个问题的原因是当元素设置了overflow-x: hidden样式时,该元素的overflow-y会被浏览器设置为auto,而不是默认值visible,导致 List 无法正确地判断滚动容器。
解决方法是去除该样式,或者在 html 和 body 标签上添加height: 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-text="没有更多了" @load="onLoad"> <div v-for="(item, index) in list" :key="index">{{item}}</div> </van-list> </div> </template> <script> export default { data() { return { // 初始化定义 loading: true, finished: false, searchData: { pageSize: 10, pageNo: 0 }, list: [] } }, methods: { onLoad(){ this.searchData.pageNo += 1 this.obtainList() }, // 列表 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.forEach((v) => { this.list.push(v) }) this.loading = false if(this.searchData.pageNo >= res.data.data.totalPage) { this.finished = true } } }) } } } </script> <style scoped> .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() }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容