Vue实现上拉加载(mui框架)无限加载新数据

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

效果图:
Vue实现上拉加载(mui框架)无限加载新数据_第1张图片
上拉
Vue实现上拉加载(mui框架)无限加载新数据_第2张图片Vue实现上拉加载(mui框架)无限加载新数据_第3张图片
需求:初始化6个数据,重新定义一个数组,控制每次上拉一次只加载4条数据
源码:
Vue和mui库自行下载
https://www.bootcdn.cn/mui/
https://www.bootcdn.cn/vue/

直接可以运行的完整demo




	
		
		Hello MUI
		
		
		
		
		
	

	
		

普通列表

小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
效果:
Vue实现上拉加载(mui框架)无限加载新数据_第4张图片
上拉
Vue实现上拉加载(mui框架)无限加载新数据_第5张图片

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=

你可能感兴趣的:(vue,mui)