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

最新推荐文章于 2023-06-26 18:26:27 发布
最新推荐文章于 2023-06-26 18:26:27 发布
阅读量794 收藏 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
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mui选项卡切换和下拉刷新加载数据列表代码.zip
07-11
这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码，手机移动端选项卡切换插件，触屏滑动下拉刷新代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrapper').scroll({ bounce: false, indicators: true, //是否显示滚动条 deceleration:deceleration }); $.ready(function() { //循环初始化所有下拉刷新，上拉加载。 $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) { $(pullRefreshEl).pullToRefresh({ down: { callback: function() { var self = this; setTimeout(function() { var ul = self.element.querySelector('.mui-table-view'); ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild); self.endPullDownToRefresh(); }, 1000); } }, up: { callback: function() { var self = this; setTimeout(function() { var ul = self.element.querySelector('.mui-table-view'); ul.appendChild(createFragment(ul, index, 5)); self.endPullUpToRefresh(); }, 1000); } } }); }); var createFragment = function(ul, index, count, reverse) { var length = ul.querySelectorAll('li').length; var fragment = document.createDocumentFragment(); var li; for (var i = 0; i < count; i ) { li = document.createElement('li'); li.className = 'mui-table-view-cell'; li[removed] = '第' (index 1) '个选项卡子项-' (length (reverse ? (count - i) : (i 1))); fragment.appendChild(li); } return fragment; }; }); })(mui); [removed]
MUI实现上拉加载和下拉刷新效果
08-30
主要为大家详细介绍了MUI实现上拉加载和下拉刷新效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
MUI 上拉刷新/下拉加载功能实例代码
08-30
主要介绍了MUI 上拉刷新/下拉加载功能实例代码，包括一些个人心得，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
mui上拉加载更多下拉刷新数据的封装过程
08-28
mui的上拉加载和下拉刷新类似，都属于pullRefresh插件。今天小编抽空给大家分享mui上拉加载更多下拉刷新数据的封装过程，需要的朋友参考下吧
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
08-29
mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数。本文重点给大家介绍使用MUI框架模拟手机端的下拉刷新和上拉加载功能，感兴趣的朋友参考下吧
mui 上拉刷新下拉加载 pullToRefresh
baidu_24743861的博客
03-07 2637
/** * 分页 */ function pagination() { mui('.mui-scroll-wrapper').scroll({ indicators: true }); //初始化scroll组件 // 刷新组件对象 // 处理中 var pullToRefresh = mui('#refresh_container').pullToRefresh({ do...
MUI 下拉刷新和上拉加载的详细介绍
爱我的修罗
11-30 6173
下拉刷新，上拉加载功能在日常APP开发中使用非常频繁，比如消息界面，新闻界面，论坛界面需要你下拉刷新最新的帖子，又或者你有100个帖子，你不可能全部都显示（性能问题），每次显示最新的10条，你先想看稍微早几天的帖子，那就上拉（一次加载N条，一直到找到你需要的），具体的实用就是这些方面，接下来详细介绍用法： 下拉刷新： mui 通过使用原生 webview 下拉刷新解决这个 DIV 动画的卡顿问...
纯JavaScript简单实现移动端网页的上拉加载、下拉刷新
最新发布
qq_44869043的博客
06-26 1185
公司要在安卓软件中，添加H5网页包，实现订单卡片列表，要求有上拉加载、下拉刷新的功能。
mui单选和多选框
weixin_30741653的博客
02-22 1104
具体见代码： <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-wid...
mui下拉加载 php,mui选项卡切换和下拉刷新加载数据列表代码
weixin_29349579的博客
04-08 178
mui选项卡切换和下拉刷新加载数据列表代码这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码，手机移动端选项卡切换插件，触屏滑动下拉刷新代码。js代码mui.init();(function($) {//阻尼系数var deceleration = mui.os.ios?0.003:0.0009;$('.mui-scroll-wrapper').scroll({bounce: fal...
MUI选项卡下拉刷新上拉加载demo
12-10
这是一个基于mui框架下实现的一个上拉刷新，下拉加载的一个数据加载demo这样的做法是为了提高用户的体验感，减少服务器的压力~
Mui下拉刷新上拉加载，后台java
weixin_42475367的博客
02-02 498
//下拉刷新（单webview模式） //html &lt;div class="mui-content" id="refreshContainer"&gt; &lt;ul class="mui-table-view" id="muiTableView"&gt; &lt;/ul&gt; &lt;/div&gt; //js mui.init({
MUI框架-09-MUI 与后台数据交互
热门推荐
肖朋伟
09-26 2万+
MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道，想要数据交互就要有数据，每次当我们发送请求，我们要清楚，怎么发，发给谁，返回的数据是什么内容，格式 然后今天呢，介绍的是调用 API，API 是什么呢，就是一个接口，比如知乎日报的API ，我们可以通过这个 API 获取到知乎上最新的消息，并且是...
mui上拉加载前端和PHP后端,MUI实现上拉加载和下拉刷新效果
weixin_30423065的博客
03-10 163
本文实例为大家分享了MUI实现上拉加载和下拉刷新展示的具体代码，供大家参考，具体内容如下编写存储过程分页(此处使用T-SQL)CREATE PROC [dbo].[Common_PageList](@tab nvarchar(max),---表名@strFld nvarchar(max), --字段字符串@strWhere varchar(max), --where条件@PageIndex int...
移动端如何实现上拉加载？下拉刷新？
A_lose的博客
05-22 3746
1、首先需要下载第三方库antd-mobile我们需要使用的是InfiniteScroll 无限滚动、PullToRefresh 下拉刷新2、我们需要在最外层的盒子上定义ref属性，并且需要调用onScroll事件、最外层盒子样式需要overflow-y:scroll;这里我们需要使用ref获取到页面高度和滚动条高度通过onScroll事件来判断是否触底这里是触底的操作 我们页面到底数据更新是在这里进行重新调用获取数据接口来渲染页面css必须使用overflow-y:scroll;
MUI踩坑记录——上拉加载后隐藏“没有更多了”
这是个真的技术博客
09-29 9580
使用MUI框架上拉动态加载新数据。当有新数据时加载数据并显示；当没有新数据时，提示“没有更多了”，并且在1s后消失。
mui实现移动端上拉加载下拉刷新功能
weixin_30481087的博客
03-16 701
移动端上拉加载下拉刷新功能是必不可少运用非常频繁的 mui框架实现方法 引入mui加载文件 <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> html: <div id="pullrefresh" class="mui-...
HTML5 移动端 上拉刷新 pull up to load more
XCG
05-12 6057
Html5上拉刷新的方式:ISCROLL 5 和 Jquery
如何实现上拉加载，下拉刷新？
m0_65349389的博客
02-01 568
下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页，只是交互形式不同开源社区也有很多优秀的解决方案，如iscroll库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载，下拉刷新，有助于对第三方库有更好的理解与使用。
实现一个移动端的table表格，有上拉加载，下拉刷新
06-03
要实现一个移动端的table表格，并且有上拉加载，下拉刷新的功能，你可以使用一些开源的UI框架或者组件库，例如MUI、Vant、Ant Design Mobile等。 以下是一个使用MUI框架实现的示例代码： HTML： ```html <!-- table表格容器 --> <div id="table-container"> <!-- table表格 --> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 1</a> </li> <<li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a> </li> <!-- 省略更多的表格行 --> </ul> <!-- 上拉加载提示 --> <div class="mui-pull-bottom-tips"> <div class="mui-loading"> 加载中... </div> </div> </div> ``` CSS： ```css /* table表格容器样式 */ #table-container { height: 100%; } /* 上拉加载提示样式 */ .mui-pull-bottom-tips { height: 50px; line-height: 50px; text-align: center; font-size: 14px; color: #888; } .mui-pull-bottom-tips .mui-loading { display: inline-block; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #07c160; animation: mui-rotate 0.6s linear infinite; } @keyframes mui-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } ``` JavaScript： ```javascript // 初始化上拉加载 mui.init({ pullRefresh: { container: '#table-container', up: { contentrefresh: '正在加载...', callback: function() { // 模拟加载数据 setTimeout(function() { // 插入新的表格行 var table = document.querySelector('.mui-table-view'); var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">New Item</a>'; table.appendChild(li); // 结束上拉加载 mui('#table-container').pullRefresh().endPullupToRefresh(false); }, 1000); } } } }); ``` 注意：这只是一个简单的示例代码，实际情况可能需要更复杂的代码来满足需求。另外，上拉加载和下拉刷新功能需要与后端API接口配合使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值