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

最新推荐文章于 2024-08-21 21:29:35 发布

宝儿的程序生涯

最新推荐文章于 2024-08-21 21:29:35 发布

阅读量1.5k

点赞数

分类专栏：上拉加载

本文链接：https://blog.csdn.net/fengtingYan/article/details/86148638

版权

上拉加载专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Vue.js和Mui框架配合实现上拉加载的效果。首先，通过新建数组并slice截取10条数据来实现默认显示。接着，利用mui.init()初始化，并调用pullRefresh方法，将pullupRefresh方法放入Vue的methods中。在page方法内计算总页数，每次上拉加载时，从总数组中截取相应页数的数据并拼接到当前数组后，直到显示“没有更多数据”。最后，提供了相关的源码供读者参考，但需自行下载所需文件。

摘要由CSDN通过智能技术生成

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

需求：在数组里面存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="mui/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="" class="pullrefresh 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" >
						<img class="mui-media-object mui-pull-left" src=" img/1.png">
							<span >{{head.newsTitel}}</span>
						<p class="mui-ellipsis" >{{head.newsSummary}}</p>												
					</li>
				</ul>
			</div>

		</div>
	</div>

	<script src="vue/vue.min.js"></script>
	<script src="mui/js/mui.min.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				heads: [],
				sliderheads: [],
				limit: 5, // 每页显示行数
				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, 5); //第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>

//问题：在实际项目上面改过以后我发现，他不能往上拉。mui初始化没有起作用，后来发现是因为我div里面没有加滚动，我只改了下面的js逻辑，

宝儿的程序生涯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

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