在用到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()
        }
      }
    })
  },
Logo

前往低代码交流专区

更多推荐