ant design vue中list的滚动加载 重复加载的坑
在用到antedesignvue中滚动加载的list组件时,发现当滚动条滚动到底部时,总会触发两次加载;滚动到底部再向上滚动时也会触发请求。这个过程会导致多余的请求,甚至会导致请求的数据不对。解决自己写一个滚动的监听mounted() {this.$nextTick(() => {// 滚动的容器const el = document.querySelector('.demo-infinit
·
在用到antedesignvue中滚动加载的list组件时,发现当滚动条滚动到底部时,总会触发两次加载;滚动到底部再向上滚动时也会触发请求。这个过程会导致多余的请求,甚至会导致请求的数据不对。
解决
自己写一个滚动的监听
mounted() {
this.$nextTick(() => {
// 滚动的容器
const el = document.querySelector('.demo-infinite-container')
const offsetHeight = el.offsetHeight
el.onscroll = () => {
const scrollTop = el.scrollTop
const scrollHeight = el.scrollHeight
if (offsetHeight + scrollTop - scrollHeight >= -1) {
// 需要执行的代码
console.log('已滚动到底部')
// 调用list 原本的数据请求函数
this.handleInfiniteOnLoad()
}
}
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)