vue配合mui框架详细讲解上拉加载demo

页面效果：
在这里插入图片描述

需求：在数组里面存16个数据，控制默认显示10条，上拉加载10条，加载完成显示没有更多数据了。

分析
1 默认显示10条：新建一个数组，slice截取10条

sliderheads: [],

this.sliderheads = this.heads.slice(0, 10);

2 上拉加载10条
这里定义

limit: 10, // 每页显示行数
totalPage: 0, // 总页数
currentPage: 0, // 当前页

思路是：mui.init() 初始化
调用pullRefresh方法，

mui.init({
	statusBarBackground: '#f7f7f7',
	pullRefresh: {
		container: '#pullrefresh',
		up: {
			contentrefresh: '正在加载...',
			contentnomore: '没有更多数据了',
			callback: app.pullupRefresh
		}
	}
});

pullupRefresh放在vue app的methods里面

pullupRefresh去调用methods的page方法，

在page方法里面获取当前页和每页几条，算出一共多少页，截取（slice）总数组的第二页的10条数据，拼接（concat）到当前数组后面，依次往后，上拉加载一页，就让当前页加1

app.sliderheads = app.sliderheads.concat(app.heads.slice(curLimit * page, curLimit * (page + 1)));

源码：所有涉及的导入文件均需要自行下载

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Hello MUI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="dist/css/mui.min.css">
	<style type="text/css">
		#list {
			/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
			margin-top: -1px;
		}
	</style>
</head>

<body>
	<div id="app">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">普通列表</h1>
		</header>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul id="list" class="mui-table-view">
					<li class="mui-table-view-cell" v-for="head in sliderheads" v-text="head">
						<span v-text="head.newsTitle"></span>
						<p class="mui-ellipsis" v-text="head.newsSummary"></p>
					</li>

				</ul>

			</div>

		</div>
	</div>

	<script src="vue/vue.min.js"></script>
	<script src="dist/js/mui.min.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				heads: [],
				sliderheads: [],
				limit: 10, // 每页显示行数
				totalPage: 0, // 总页数
				currentPage: 0, // 当前页
			},

			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"
				}, {
					newsTitel: "16161611616",
					newsSummary: "cdasvvf"
				}]
				this.sliderheads = this.heads.slice(0, 10); //第1,2,3,4,5
				//console.log(this.heads)

			},
			methods: {
				page: function () {
					app.totalPage = Math.ceil(app.heads.length / app.limit) //总页数 =3 
					let page = app.currentPage //当前页
					let curLimit = app.limit //每页5行
					// 返回指定条数的数组 //重新定义一个数组，控制每次上拉一次只加载1页数据
					app.sliderheads = app.sliderheads.concat(app.heads.slice(curLimit * page, curLimit * (page + 1))); //567891					
					return app.sliderheads
				},
				pullupRefresh: function () {
					app.currentPage++;
					console.log(app.currentPage)
					setTimeout(function () {
						app.$options.methods.page()
				
						setTimeout(nextRefresh, 100);
						function nextRefresh() {
							if (app.currentPage + 1 == app.totalPage) {
								//显示没有更多数据了
								mui("#pullrefresh").pullRefresh().endPullupToRefresh(true);
							} else {
								mui("#pullrefresh").pullRefresh().endPullupToRefresh(false);
							}							
						}						
					}, 1000);
				}
			}
		})

		mui.init({
			statusBarBackground: '#f7f7f7',
			pullRefresh: {
				container: '#pullrefresh',
				up: {
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了',
					callback: app.pullupRefresh
				}
			}
		});
	</script>
</body>

</html>

vue配合mui框架详细讲解 上拉加载demo

猜你喜欢

vue配合mui框架详细讲解上拉加载demo