vue的加载更多设计

首先我需要去引入一个loading组件   和  一个404 的页面组件

这里使用到的是uni-load-more  ，大家可以从uni-app官网中获取

使用说明

首先我需要去引入一个loading组件   和  一个404 的页面组件​​​​​​

1.uni-load-more这个组件有个属性 loadingType: 0, // 加载状态  0 显示 上拉加载更多  1 加载中 2 无更多 

2.在页面的设计中需要设计5个值

                 

               params:{}, //请求数据需要的参数 

               pageContent: [], //页面需要展示的数组
               current_page: 1, //当前页面
                last_page: 1, //最终页面
                loadingType: 0, // 加载状态  0 上拉加载更多  1 中 2 无更多 
                showContent: 0, //页面状态  0 请求中 1 有数据展示 2 无数据404

3. 引入组件  并且加入当前页面的局部组件中

    import uniLoadMore from '@/components/uni-load-more' //loading组件

    import uniLoadMore from '@/components/blankPage'   // 空白页面  

    components: {
            uniLoadMore
     }

4. 页面中的代码

methods:{
    //处理页面传递过来的参数
    setdataParam(optionObj){
		if(optionObj instanceof Object){
		      this.param = optionObj;
		}
	},
    refresh() {
        // 数据制空
		this.pageContent = [];
        // 加载状态 为加载中
		this.loadingType = 1;
        // 传递的参数为param
        var param = this.param;
        加载为第一页
        this.param.page = 1;
        // 加载数据
		this.getContent(this.param);
				
	},
    // 设置分页
	setPagination(current_page, last_page) {
        //这里是伪代码
		this.current_page = current_page;
		this.last_page = last_page;
	},
    // 判断是否有下一页
	ishasPage(page, last_page) {
		return page < last_page;
	},
    renderContent(data) {
       // 处理逻辑
       if(success){
         var current_page = data.data.meta.current_page;
		 var last_page = data.data.meta.last_page;
		 var data = data.data.data;
		 this.setPagination(current_page, last_page);
         if(current_page==last_page){
			  this.loadingType = 2;
		 }
         if(data.length==0&&param.current_page==1){
             this.showContent = 2;
			 this.loadingType = 2;  
             return;     
         }
           this.showContent = 1;
           this.pageContent = [...this.pageContent, ...data];
       }
    },
     // 获取内容
	getContent(e) {
        // 需要处理参数e
		this.getcooperates(e).then(data => this.renderContent(data));
	},
    // 下拉加载的逻辑
    onReachBottom(){
        	this.loadingType = 1;
			var current_page = this.current_page;
            var last_page = this.last_page;
			if (this.ishasPage(nextpage,last_page)) {
                // 设置下一页
                this.param.page= this.param.page?(this.param.page+1):2;
				this.getContent(this.param);
			} else {
				this.loadingType = 2;
			}
    },
    mounted() {
       var param = this.$route.params;
       this.setdataParam(param);
       this.refresh();

    }

}