vue页面触底触发分页加载

封装工具方法

// utils/utils.js
let loading=false;
/***
 * 滑动事件
 * @param callback 触底回掉函数
 */
const scrollBottom =(callback)=>{
    let t=document.documentElement.scrollTop;
    let h=document.documentElement.clientHeight;
    let v=document.body.scrollHeight;
    if(t+h>=v-50&&!loading){ // -50 即是距离底部50px开始执行 回掉函数 可根据需要自己设置
        loading=true;
        callback().then(()=>{
            //当前页加载完毕
            loading=false;
        }).catch(()=>{
            //没有更多数据了..
            loading=true;
        })
    }
}
/**
 * 监听滚动事件
 * @param callback loading函数
 */
const registerAddEventListener=(callback)=>{
    window.addEventListener("scroll", scrollBottom.bind(this, callback), false);
}
/**
* 移除监听
*/
const removeEventListener=()=>{
    window.removeEventListener('scroll', scrollBottom,false);
}
//导出
export {registerAddEventListener,removeEventListener};

如何在组件中使用

	//list.vue
<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id">{{item}}</li>
        </ul>
    </div>
</template>


<script>
	//引入
    import {registerAddEventListener,removeEventListener} from '../../utils/utils.js'
    export default {
        data() {
            return {
                list: []
            };
        },
        mounted() {
        	//dom加载完毕 调用工具方法  传入触底后需执行的回调函数
           registerAddEventListener(this.loading);
        },
        destroyed() {
        	//组件销毁 移除事件监听 避免打开其他组件页面受影响
            removeEventListener();
        },
        methods: {
        	//ajax 加载list
            loading() {
                return new Promise(((resolve,reject)=>{
                    this.$http.get(`api_url`).then(res=>{
                        if(res.data.length>0){ 
                        	this.list=res.data; //赋值
                        	resolve() //还有数据的需要加载
                        }else{
                            reject() //没有更多数据了 
                            // do something
                            Toast('到底啦！！！')
                        }
                    })
                }))
            }
        }
    };
</script>
<style scoped>
</style>

在最好的年纪去努力！！