vue3原生实现触底加载

第一步data定义初始值

    data() {
        return {
            index: 0,
        }
    },

第二步自定义函数定义该函数

    methods: {
        sorlly() {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //  可视区域
            let clientHeight = document.documentElement.clientHeight;
            // 页面的高度
            let scrollHeight = document.documentElement.scrollHeight;
            //如果触底就让index++
            if (scrollTop + clientHeight >= scrollHeight) {
                this.index++;
            }
        }
    }

第三步在监听sorlly函数

    created() {
        window.addEventListener('scroll', this.sorlly)
    },

第四步监听index的变化调用函数

watch: {
    index() {
        //调用函数重新拉取数据
        this.getList()
    }
}

最后可以在路由跳转的时候销毁监听事件

beforeUnmount() {
    // 移除事件监听
    window.removeEventListener('scroll', this.sorlly)
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容