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

 data() {
        return {
            tab:[], // 存放列表数据
            onFetching:false,
}}

 mounted() {
        let sw = true //滚动控制开关
        document.addEventListener('scroll', this.scrollHandle) //启动监听滚动事件
    }

methods: {
        // 滚动
        scrollHandle: function(e) {
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight //document的滚动高度
            let nowScotop = document.documentElement.clientHeight || document.body.clientHeight //可视区高度
            let wheight = document.documentElement.scrollTop || document.body.scrollTop //已滚动高度

            if (this.onFetching) {
                // do nothing
            } else {
                if (scrollHeight - wheight < 1100) {
                    this.onFetching = true
                    setTimeout(() => {
                        this.pages.pageIndex = Number(this.pages.pageIndex)// 转为number类型
                        this.pages.pageIndex += 1
                        this.getData() //加载列表的请求方法
                        this.onFetching = false
                    }, 500)
                }
            }
        },
        async getData() {
            var res = await 。。。。(`pageIndex=${this.pages.pageIndex}&pageSize=
${this.pages.pageSize}`)
            if (res.data) {
                for (let i = 0; i < res.data.content.length; i++) {
                    this.tab.push(res.data.content[i])
                }
                console.log(this.tab)
                this.sw = true
            }
        },
}