vue底部滚动加载更多数据

vue底部滚动加载更多数据

data() {
    return {
         loading: false,
         loadingMore: false,//loading 加载更多
         isScroll: true,//是否可以滚动
         pageIndex: 1,
         pageSize: 10,
         list: [],
     }
 },

mounted() {
    document.addEventListener('scroll', this.scrollMoreData, false)
},

methods: {
    scrollMoreData() {
        const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop //滚动高度
        const clientHeight = document.documentElement.clientHeight || window.screen.availHeight //屏幕可用工作区高度
        const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight //网页可见区域高(包括边线的宽)
        // console.log(scrollTopHeight, clientHeight, scrollTopHeight + clientHeight + 50, offsetHeight)

        if ((scrollTopHeight + clientHeight) + 50 >= offsetHeight && this.isScroll) {
            this.isScroll = false
            this.loadingMore = true
            let pageNo = this.pageIndex += 1
            api.Get('/list', {
                pageIndex: pageNo,
                pageSize: this.pageSize,
            }).then(res => {
                this.loadingMore = false
                if (res.data.list.length > 0) {
                    this.isScroll = true
                    this.list = [...this.list, ...res.data.list]
                } else {
                    this.show = true
                }
            })
        }
        },
    },
},

destroyed() {
    document.removeEventListener('scroll', this.scrollMoreData, false)