vue页面滚动条分页加载数据

mounted() {
    //监听页面滚动事件
    window.addEventListener("scroll", this.handleScroll);
  }
  
//methods里面的方法
handleScroll() {
    //窗口滚要做的操作写这里
    let sh = document.documentElement.scrollHeight || document.body.scrollHeight; // 滚动条高度
    let st = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条距离顶部的距离
    let ch = document.documentElement.clientHeight || document.body.clientHeight; // 滚动条外容器的高度
    if (st + ch >= sh-20) {
       //快到底时----加载
       if(this.total && this.list.length

1.需要判断滚动条是否到底部：

需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

2.监听页面还是某个元素,上面是监听页面，下面监听某一部分。

mounted(){
            let that = this
             // 监听滚动事件
            document.getElementById('resultScroll').addEventListener('scroll', that.handleScroll,true)
        },
        methods: {
            handleScroll(){
                let that = this
                let sh = that.$refs['myScrollbar'].scrollHeight // 滚动条高度
                let st = that.$refs['myScrollbar'].scrollTop // 滚动条距离顶部的距离
                let ch = that.$refs['myScrollbar'].clientHeight // 滚动条外容器的高度
                if (st + ch >= sh) {
                    //到底了-业务逻辑
                    that.tradPageNo += 1
                    if(that.tradPageNo<=that.resultList.page.totalPage){
                        that.getResultList()
                    }
                }
            },
            // 获取结果列表
           	getResultList() { }
        }