vue丨监听页面滚动位置

let vm = new Vue(
    data () {
        return {
            recordList: [], // 展示列表
            hasNextPage: true, // 是否有下一页
            loadPageNo: 0, // 当前加载页码
            pageSize: 5, // 一次加载条数
            pullUpSwitch: true, // 能否发起请求
            pullUpWord: ''
        }
    }
)

// 当前距离顶部的滚动值
function getScrollTop () {
    let scrollTop = 0
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
    } else if (document.body) {
        scrollTop = document.body.scrollTop
    }
    return scrollTop
}
// 屏幕的高度值
function getClientHeight () {
    let clientHeight = 0
    if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
    } else {
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
    }
    return clientHeight
}
// 滚动条的长度
function getScrollHeight () {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
}

// 监听滚动条
window.addEventListener('scroll', () => {
    let scrollDiff = getScrollHeight() - getClientHeight() - getScrollTop()
    if (vm.pullUpSwitch && scrollDiff <= 50) {
        vm.pullUpSwitch = false
        vm.loadMore(vm.loadPageNo, vm.pageSize)
    }
})