Vue实现上拉加载（mui框架）无限加载新数据

源码：
链接：https://pan.baidu.com/s/1gfshnYmiAs0HQJXPXiT-dQ
提取码：942q
复制这段内容后打开百度网盘手机App，操作更方便哦
下载直接打开index.html可以看效果

效果图：

上拉

需求：初始化6个数据，重新定义一个数组，控制每次上拉一次只加载4条数据
源码：
Vue和mui库自行下载
https://www.bootcdn.cn/mui/
https://www.bootcdn.cn/vue/

直接可以运行的完整demo

	
		
		
		
		
		
		
		
	

	
		

			

				
				
普通列表
			
			

				

					

						

					
				
			
		
	
		
		
		
		
	

小demo可以实现的是：给定固定数据，然后上拉就会显示4条其他数据，
方式是 加载四条数据放进一个数组，然后拼接到当前列表的后面

而项目要实现的是：先fetch在created获取到所有的数据，控制先显示默认10条数据，然后上拉一次增加4条，最后如果没有数据则不再显示

问题1：怎么实现加载出10条数据，
问题2：demo里面的拼接的是直接写上去的，如果要拼接的数据有很多，怎么办？也就是push(‘item’ + i)里面如何去改

所以我们要把demo改成默认放15条数据，让他先显示5条，然后加载一次显示2条，加载完成提示没有数据了

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
slice() 方法可从已有的数组中返回选定的元素。

var data = json.data;
 for (var i = 0; i < 5; i++) {
       app.heads.push(data[i]);                       
   }
或者
this.heads = this.allheads.slice(0,5)

fetch(adminUrl + 'common/newsServer/0').then(function (response) {
	return response.json();
}).then(function (json) {
	app.heads = json.data;
});

需求：默认放15条数据，让他先显示5条，然后加载一次显示2条，加载完成提示没有数据了

var app = new Vue({
			el: '#app',
			data: {
				heads: [],
				sliderheads:[]
			},
			created: function () {
				//初始化数据
				this.heads = [{
					newsTitel: "1111111",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "222222",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "333333",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "4444444",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "555555",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "666666",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "7777777",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "888888",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "999999",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "1010101",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "1111111",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "121212",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "131313113",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "14141414",
					newsSummary: "cdasvvf"
				}, {
					newsTitel: "15155115",
					newsSummary: "cdasvvf"
				}]
				this.sliderheads = this.heads.slice(0,5);//第1,2,3,4,5
				console.log(this.heads)
			},
			methods: {

				pullupRefresh: function () {
					//
					setTimeout(function () {
						//重新定义一个数组，控制每次上拉一次只加载2条数据
						app.sliderheads = app.sliderheads.concat(app.heads.slice(5,7));//6,7
						mui('#pullrefresh').pullRefresh().endPullupToRefresh();

					}, 1000);
				}
			}
		})

目前要解决的问题：对当前所有数据分页：page，pageSize
效果：

上拉

data: {
				heads: [],
				sliderheads: [],
				limit: 10, // 每页显示行数
				totalPage: 0, // 总页数
				currentPage: 0, // 当前页
			},

			created: function () {
				//初始化数据
				this.heads = [{}, {
					newsTitel: "15155115",
					newsSummary: "cdasvvf"
				}]
				this.sliderheads = this.heads.slice(0, 5); //第1,2,3,4,5
				console.log(this.heads)
				this.page()
			},
			methods: {
				page: function () {
					this.totalPage = Math.ceil(this.heads.length / this.limit)//总页数 =3 
					console.log(this.totalPage)
					let page = this.currentPage//当前页
					let curLimit = this.limit //每页5行
					// 返回指定条数的数组
					this.sliderheads = this.sliderheads.slice(curLimit * page, curLimit * (page + 1))
					return this.sliderheads
					
				},
				pullupRefresh: function () {
					console.log(app.heads.length)
					setTimeout(function () {
						//重新定义一个数组，控制每次上拉一次只加载4条数据
						app.sliderheads = app.sliderheads.concat(app.heads.slice(5,7));//6,7
						mui('#pullrefresh').pullRefresh().endPullupToRefresh();

						mui('#pullrefresh').pullRefresh().endPullupToRefresh();

					}, 1000);
				}
			}

https://blog.csdn.net/sinat_17775997/article/details/54943822

http://www.drehere.com/?s=mui上拉加载&pn=&rn=