直接上代码:

以下为js部分 ,请求后台数据需自己封装:

        
	export default{
        //定义的数据变量
        data(){
            return {
                list:[],
                page:1,//当前页
                limit:10
            }
        },
		methods:{
            //获取后台接口数据
            async getData(){
                //请求数据
                const data = {
                    page: this.page,
                    limit: this.limit,
                    type: "1"
                }
                // async:异步,await:需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码
                const res = await requset(`url`, data, 'get');//自己封装的请求数据的方法
                this.list = res.data;
            },
            
            //滚动分页加载数据
            scroll() {
                let isLoading = true;//是否有数据可以加载
                window.onscroll = async () => {
                    // 距离底部200px时加载一次
                    let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200;
                    if (bottomOfWindow && isLoading == true) {
                        this.page = this.page + 1;//每次分页+1
                        const data = {
                            page: this.page,
                            limit: this.limit,
                            type: "1"
                        }
                        const res = await requset(`url`, data, 'get');//自己封装的请求数据的方法
						//有数据的时候加载
                        if(res.data.length > 0){
                            this.list.push(...res.data);//追加数据 使用 ...语法
                            isLoading = true;
                        }else{
                            this.$notify({
                                title: '温馨提示:',
                                message: '暂无更多数据信息!',
                                position: 'bottom-right'
                            });
							isLoading = false;//无数据可以加载
                        }
                    }
                }
            }
        },
		/*生命周期函数-加载完毕执行*/
        mounted(){  
                this.getData();//初次加载
                this.scroll();
		}
	}

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐