移动端开发框架mui之上拉刷新、下拉加载数据

最新推荐文章于 2024-08-31 14:24:07 发布
最新推荐文章于 2024-08-31 14:24:07 发布
阅读量843 收藏 2
点赞数
分类专栏： 移动端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zgphacker2010/article/details/114767563
版权

MUI 官网：https://www.dcloud.io/mui.html

MUI 文档：https://dev.dcloud.net.cn/mui/ui/

演示地址：https://dcloud.io/hellomui/ （支持手机和电脑浏览器）

开发工具：https://www.dcloud.io/hbuilderx.html （Hbuilder X）

 

 

上拉刷新、下拉加载相关 api 参考：

https://dev.dcloud.net.cn/mui/pulldown/

https://dev.dcloud.net.cn/mui/pullup/

项目中上拉和下拉跟 mui api中的调用方式有所不同，这里以项目中使用的方式为例：

1、首先页面增加样式：

<style>
	html,
	body {
		background-color: #efeff4;
	}
	.mui-bar~.mui-content .mui-fullscreen {
		top: 44px;
		height: auto;
	}
	.mui-pull-top-tips {
		position: absolute;
		top: -20px;
		left: 50%;
		margin-left: -25px;
		width: 40px;
		height: 40px;
		border-radius: 100%;
		z-index: 1000;
	}
	.mui-bar~.mui-pull-top-tips {
		top: 24px;
	}
	.mui-pull-top-wrapper {
		width: 42px;
		height: 42px;
		display: block;
		text-align: center;
		background-color: #efeff4;
		border: 1px solid #ddd;
		border-radius: 25px;
		background-clip: padding-box;
		box-shadow: 0 4px 10px #bbb;
		overflow: hidden;
	}
	.mui-pull-top-tips.mui-transitioning {
		-webkit-transition-duration: 200ms;
		transition-duration: 200ms;
	}
	.mui-pull-top-tips .mui-pull-loading {
		/*-webkit-backface-visibility: hidden;
		-webkit-transition-duration: 400ms;
		transition-duration: 400ms;*/
		
		margin: 0;
	}
	.mui-pull-top-wrapper .mui-icon,
	.mui-pull-top-wrapper .mui-spinner {
		margin-top: 7px;
	}
	.mui-pull-top-wrapper .mui-icon.mui-reverse {
		/*-webkit-transform: rotate(180deg) translateZ(0);*/
	}
	.mui-pull-bottom-tips {
		text-align: center;
		background-color: #efeff4;
		font-size: 15px;
		line-height: 40px;
		color: #777;
		margin-bottom: 100px;/** 显示加载提示信息： 没有更多数据了等等。 */
	}
	.mui-pull-top-canvas {
		overflow: hidden;
		background-color: #fafafa;
		border-radius: 40px;
		box-shadow: 0 4px 10px #bbb;
		width: 40px;
		height: 40px;
		margin: 0 auto;
	}
	.mui-pull-top-canvas canvas {
		width: 40px;
	}
	.mui-slider-indicator.mui-segmented-control {
		background-color: #efeff4;
	}
</style>

2、增加 或 下载上拉下拉相关js文件、以及没有数据提示图片。

3、添加页面，完善上拉刷新下拉加载功能

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style>
		html,
		body {
			background-color: #efeff4;
		}
		.mui-bar~.mui-content .mui-fullscreen {
			top: 44px;
			height: auto;
		}
		.mui-pull-top-tips {
			position: absolute;
			top: -20px;
			left: 50%;
			margin-left: -25px;
			width: 40px;
			height: 40px;
			border-radius: 100%;
			z-index: 1000;
		}
		.mui-bar~.mui-pull-top-tips {
			top: 24px;
		}
		.mui-pull-top-wrapper {
			width: 42px;
			height: 42px;
			display: block;
			text-align: center;
			background-color: #efeff4;
			border: 1px solid #ddd;
			border-radius: 25px;
			background-clip: padding-box;
			box-shadow: 0 4px 10px #bbb;
			overflow: hidden;
		}
		.mui-pull-top-tips.mui-transitioning {
			-webkit-transition-duration: 200ms;
			transition-duration: 200ms;
		}
		.mui-pull-top-tips .mui-pull-loading {
			/*-webkit-backface-visibility: hidden;
			-webkit-transition-duration: 400ms;
			transition-duration: 400ms;*/
			
			margin: 0;
		}
		.mui-pull-top-wrapper .mui-icon,
		.mui-pull-top-wrapper .mui-spinner {
			margin-top: 7px;
		}
		.mui-pull-top-wrapper .mui-icon.mui-reverse {
			/*-webkit-transform: rotate(180deg) translateZ(0);*/
		}
		.mui-pull-bottom-tips {
			text-align: center;
			background-color: #efeff4;
			font-size: 15px;
			line-height: 40px;
			color: #777;
			margin-bottom: 100px;/** 显示加载提示信息： 没有更多数据了等等。 */
		}
		.mui-pull-top-canvas {
			overflow: hidden;
			background-color: #fafafa;
			border-radius: 40px;
			box-shadow: 0 4px 10px #bbb;
			width: 40px;
			height: 40px;
			margin: 0 auto;
		}
		.mui-pull-top-canvas canvas {
			width: 40px;
		}
		.mui-slider-indicator.mui-segmented-control {
			background-color: #efeff4;
		}
	</style>
	</head>

	<body  style="background-color: #FFFFFF;">
		<!-- 页面导航栏 -->
		<header id="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 class="mui-content" style="background-color:#fff;" >
			<div id="slider" class="mui-slider mui-fullscreen">
				<div class="mui-slider-group"> 
					<div id="item1" class="mui-slider-item mui-control-content">
						<div  class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="itemList0">	
								</ul>					
								<div id="tab-empty0" class="" wdith="100%" style="text-align: center;"><img src="image/icon_empty.png" style="width: 200px;height: 200px;"></div>
							</div>
						</div> 
					</div>
				</div>
			</div>	
		</div>	
		<script src="js/mui.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init({
				statusBarBackground: '#f7f7f7',
				swipeBack:false //启用右滑关闭功能
			});
			//阻尼系数
			var deceleration = mui.os.ios?0.003:0.0009;
			mui('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration:deceleration
			});
			
			//查询参数（分页查询、上拉刷新和下拉加载都是查询后台数据分页功能）
			var loadRateObject = {
				pageNumber: 1, noMore: false
			};
			
			//初始化下拉刷新、上拉加载控件 
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh(self) {
				loadRateObject.pageNumber = 1;
				loadRateObject.noMore = false;
				getRateList(loadRateObject , true , self); 
			}
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh(self) {
				if (loadRateObject.noMore == false){
					getRateList(loadRateObject , false , self);
				}else{
					self.endPullUpToRefresh(true);//参数为true代表没有更多数据了。
				}
			}
			
			//循环初始化所有下拉刷新，上拉加载。 .mui-slider-group .mui-scroll
			mui('.mui-scroll-wrapper .mui-scroll').pullToRefresh({
				down: {
					callback: function() {
						var self = this;
						setTimeout(function(){
							pulldownRefresh(self);
							self.endPullDownToRefresh();
						} , 500);
					}
				},
				up: {
					callback: function() {
						var self = this;
						setTimeout(function() {		
							self.endPullUpToRefresh(loadRateObject.noMore); //参数为true代表没有更多数据了。
							pullupRefresh(self);
							
							//alert("下拉刷新 index : " + index + " , 参数 " + JSON.stringify(loadAlarm0Object));
						}, 500);
					}
				}
			});
							
				
			/** 默认自动刷新数据 */
			setTimeout(function(){
				//刷新两个或多个选项卡数据
				/**
				$.each(document.querySelectorAll('.mui-scroll-wrapper .mui-scroll'), function(index, pullRefreshEl) {
					$(pullRefreshEl).pullToRefresh().pullUpLoading();
				});
				*/
			   //页面加载后，自动加载数据
				mui('.mui-scroll-wrapper .mui-scroll').pullToRefresh().pullUpLoading();
				
			} , 300);
			
			
			/** 
			 * 查询评价信息 （分页查询）
			 * refreshFlag :  刷新标志（true / false）。如果是刷新则加载第一页数据原来的数据清空；如果是为false 则追加到列表（加载更多）
			 */  
			function getRateList(loadRateObject , refreshFlag , self){
				var postData = {
					pageNumber: loadRateObject.pageNumber
				}
				ajaxJson(
					'/rate/findAll',
					postData,
					function(resultObject){

						//请求成功处理
						if (resultObject.code == 1000){
							//plus.nativeUI.alert(JSON.stringify(resultObject.data), function(){}, "系统提示: 结果", "确定");
							var pagerObject = resultObject.data;
							if (pagerObject.list && pagerObject.list.length > 0){
								//取出分页数据： 数组
								var list = pagerObject.list;
								//根据分页数据，得到本次获取的数据总长度
								var totalCount = list.length;
								//空数据提示内容
								var tabEnpty =  document.getElementById('tab-empty0');
								if (totalCount > 0){
									//有数据时，隐藏空数据提示信息
									tabEnpty.classList.add("mui-hidden");
								}else{
									//没有数据时，显示空数据提示信息
									tabEnpty.classList.remove("mui-hidden"); 
								}
								var htmlContent = '';
								//解析分页数据，每一条数据都是一个对象
								for (var i = 0 ; i < list.length ; i++){
									//获得当前数据对象
									var rateInfo = list[i];
									var id = rateInfo.id;
									var title = rateInfo.title;
									// ...... 这里获取对象属性数据
									// ...... 这里获取对象属性数据
									// ...... 这里获取对象属性数据
									htmlContent += '<li class="mui-table-view-cell">';
									htmlContent += '<div class="mui-table">';
									htmlContent += '<div class="mui-table-cell">';
									htmlContent += '<h5>标题1：' + title + '</h5>';
									htmlContent += '<h5>标题2：' + title + '</h5>';
									htmlContent += '<h5>标题3：' + title + '</h5>';
									htmlContent += '</div>';
									htmlContent += '</div>'; 
									htmlContent += '</li>';
								}
								//页面数据列表对象
								var itemListObject = document.getElementById("itemList0");
								//判断是刷新 还是 加载更多
								if (refreshFlag == true){
									self.refresh(true);//重置控件：解决上拉分页查询所有数据后，下拉刷新显示的数据列表无法上拉操作（提示没有更多数据）
									//下拉刷新数据时，直接将列表内容显示为当前已刷新的内容
									itemListObject.innerHTML = htmlContent;
								}else{
									self.endPullUpToRefresh(false);//参数为true代表没有更多数据了。
									//上拉加载数据时，将当前数据追加到咧白哦中。
									itemListObject.insertAdjacentHTML("beforeEnd" , htmlContent);
								}
								//处理加载信息: 当当前当页等于总页数
								if (pagerObject.pageNum == pagerObject.pages){ 
									loadRateObject.noMore = true;
								}else{
									var pageNumber = pagerObject.pageNum;
									loadRateObject.pageNumber = pageNumber + 1;
								}
								alert("已为您加载 " + totalCount + " 条记录。");
								//plus.nativeUI.toast("已为您加载 " + totalCount + " 条记录。");
							}
						}
						else{
							//plus.nativeUI.alert(resultObject.msg, function(){}, "系统提示", "确定");
							alert(resultObject.msg);
							return;
						}
					},
					function(errorMsg){
						//请求失败处理
						alert(errorMsg);
						//plus.nativeUI.alert(errorMsg, function(){}, "系统提示", "确定");
					},
					""
				);
				
			 }	
		</script>
	</body>
</html>

注意：本例子不包含后台接口程序，后台接口主要完成数据分页功能，主要返回数据列表、当前页、总页数等内容。后台返回数据的字段名不一致，则需要修改上面的代码。

4、功能截图

默认显示：

数据加载中显示：

下拉刷新演示：

上拉加载更多演示：

 

注意：因为没有跟后台相关关联，页面提示了 ’连接服务器超时 ‘ 错误 。页面遮罩加载提示内容如果不需要页可以去掉（使用了上一篇文中 ajax 封装的请求 js ）。

移动端开发框架mui之ajax封装（含文件上传）

细节问题

上拉分页查询所有数据后，下拉刷新显示的数据列表无法上拉操作（提示没有更多数据）

解决办法： 刷新控件执行.refresh(true);//重置控件：解决上拉分页查询所有数据后，下拉刷新显示的数据列表无法上拉操作（提示没有更多数据）

源码：

链接：https://pan.baidu.com/s/17crKH_h1P31CcEVlX5ycPA
提取码：q4kc
 

 

其他资料：

mui实现列表的下拉刷新上拉加载

 

zgphacker2010
关注
专栏目录
HTML5 移动端 上拉刷新 pull up to load more
XCG
05-12 6093
Html5上拉刷新的方式:ISCROLL 5 和 Jquery
MUI框架的上拉加载和下拉刷新，回到顶部
wxhua420701325的博客
04-23 505
mui的上拉加载和下拉刷新类似，都属于pullRefresh1、页面滚动到底，显示“正在加载...”提示（mui框架提供）2、执行加载业务数据逻辑（开发者提供）3、加载完毕，隐藏"正在加载"提示（mui框架提供）4、没有更多数据加载时，结束加载，显示"没有更多数据了..."开发者只需关心业务逻辑，实现加载更多数据即可。//业务逻辑代码，比如通过ajax从服务器获取新数据；//注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后。
mui实现移动端上拉加载下拉刷新功能
weixin_30481087的博客
03-16 709
移动端上拉加载下拉刷新功能是必不可少运用非常频繁的 mui框架实现方法 引入mui加载文件 <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> html: <div id="pullrefresh" class="mui-...
移动端之上拉刷新
fortunegrant的博客
03-12 254
判断最后一个元素的底部是否已出现在底部if( $('.pin').eq($('.pin').length-1).offset().top-$(window).scrollTop() &lt; $(window).height() )如果有一个上拉加载更多，则判断该元素（即上拉加载更多）离视窗的高度（getBoundingClientRect().top）是否小于视窗的长度（document.doc...
mui上拉加载前端和PHP后端,MUI实现上拉加载和下拉刷新效果
weixin_30423065的博客
03-10 174
本文实例为大家分享了MUI实现上拉加载和下拉刷新展示的具体代码，供大家参考，具体内容如下编写存储过程分页(此处使用T-SQL)CREATE PROC [dbo].[Common_PageList](@tab nvarchar(max),---表名@strFld nvarchar(max), --字段字符串@strWhere varchar(max), --where条件@PageIndex int...
vant 组件 移动端实现上拉刷新
xiaomazhuli的博客
05-17 799
工作中如果有您解决不了的问题或者您花费2小时还没解决的问题，这里可以有偿帮您高效直接解决bug，我们团队的微信号是18062748486；如加微信，请备注“Bug 解决“； 一般在项目中，如果是用了vant组件的，会先在全局注册，这样每个vue组件都可以使用vant组件 以下代码再某个在你要写上拉刷新的组件中写 <van-pull-refresh v-model="upLoading" @refresh="onRefresh" v-else> <!-- 内容 --> &l..
Vue移动端上拉加载下拉刷新组件
dz0210的博客
12-28 1029
Vue.js 上拉加载下拉刷新组件
mui上拉刷新下拉加载
yangsitong1314的博客
11-28 1812
mui 上拉刷新下拉加载 在做列表上拉刷新下拉加载的时候遇到了一些问题 总结一下供大家参考 这里我用到了一个自己封装的工具类来调mui post方法的  大家也可以用mui本身自己去调用 1.html代码 2.script代码 var commonHelp = new CommonHelp(); mu
mui移动端框架
12-06
4. **组件丰富**: 包含导航栏、侧滑菜单、下拉刷新、上拉加载、按钮、输入框、表单、弹窗等，满足开发中的各种需求。 5. **易用性**: MUI提供清晰的文档和示例代码，便于开发者快速上手。 6. **可扩展性**: 除了...
基于mui写的H5移动端全国地区三级联动菜单
02-28
“mui”是一个流行的前端开发框架，专注于移动互联网应用，它提供了一系列组件和服务，如导航、下拉刷新、上拉加载、弹出层等，帮助开发者快速构建响应式和高性能的移动Web应用。MUI的设计理念是轻量级、高性能和...
移动端实现上拉加载下拉刷新
10-17
此文档描述的是在移动端实现上拉加载与下拉刷新功能。
移动端h5webapp简易的上拉加载下拉刷新
08-11
移动端，h5/webapp, 简易的上拉加载，下拉刷新
移动端上拉加载功能
01-02
移动端上拉加载功能 。 jQuery1.7以上 或者 Zepto 二选一，不要同时都引用。
MUI最接近原生APP体验的高性能框架
08-07
在组件库方面，MUI涵盖了常见的页面布局、导航、按钮、表单、提示、加载等基础组件，同时也提供了诸如轮播图、侧滑菜单、下拉刷新等高级组件。这些组件经过优化，运行效率高，性能出色，能够在各种硬件配置的设备上...
hello_mui.zip_mui
09-21
3. 组件丰富：包括导航栏、侧滑菜单、下拉刷新、上拉加载、时间选择器等常用组件，满足日常开发需求。 4. 快速开发：提供简单的API接口，开发者可以快速搭建应用结构，节省开发时间。 三、开始你的mui之旅 "hello_...
一个全端的，Web层基于mui，服务层基于Node.js,，数据层基于MySQL开发的手机端手机鞋品网上商城，模块化.zip
02-24
2. 支持下拉刷新、上拉加载等常见手势操作。 3. 提供了导航栏、弹出框、轮播图等多种组件，满足页面布局和交互需求。 4. 结合HTML5特性，优化了动画性能，提供流畅的用户体验。 其次，服务层采用了Node.js，这是一...
mui实现上拉刷新与下拉加载功能
浪子四方
08-15 1060
引言 下拉刷新与上拉加载功能可谓是现在APP开发的两个常见功能，在电脑端我们常常通过点击分页的形式来向用户展示更多内容，不过在移动端我们可不想有这些多余的点击操作，只要想看更多内容只要下拉话上拉就可以了，这个小技巧可以大大的提高用户体验，下面我们来简单的了解一下MUI是如何实现这两种功能的。 关键点1： 初始化下拉刷新与上拉加载功能 mui.init({ pullRefresh...
Android 下拉上拉刷新组件实现指南
最新发布
weixin_42551310的博客
08-31 2058
本文还有配套的精品资源，点击获取 简介：在Android开发中，实现下拉刷新和上拉加载更多功能对于提供流畅的数据流体验至关重要。本文全面介绍了一款支持多种视图（如ListView和GridView）的全能刷新组件的集成与使用。详细讲解了下拉刷新与上拉加载的概念、Android相关组件的使用、集成步骤、兼容性和通用性、用户体验优化及性能考量。该组件通过高度封装和抽象设计，简化...
mui封装：实现上拉加载与下拉刷新数据处理
在本文档中，作者将详细介绍如何在MUI（Mobile UI）框架下实现上拉加载更多和下拉刷新的功能，并提供了一个实际的封装过程。MUI是一个轻量级的移动前端开发框架，其PullRefresh插件使得操作界面的滚动事件变得简单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值