项目场景:
今天项目用到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;