移动端开发框架mui之上拉刷新、下拉加载数据(选项卡左右移动自动和刷新指定选项卡内容)

移动端开发框架mui之上拉刷新、下拉加载数据(加载多选项卡数据)

 

 之前的代码:
 

<!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 style="padding: 10px 10px;z-index: 1000;">
					<div id="segmentedControl" class="mui-segmented-control">
						<a class="mui-control-item mui-active" data-index="0" href="#item0">已评价</a>
						<a class="mui-control-item" data-index="1" href="#item1" >待评价</a>
					</div>
				</div>
				
				<div class="mui-slider-group"> 
					<!-- 已评价 -->
					<div id="item0" 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" wdith="100%" style="text-align: center;"><img src="image/icon_empty.png" style="width: 200px;height: 200px;"></div>
							</div>
						</div> 
					</div>
					
					<!-- 待评价 -->
					<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="itemList1">
							待评价内容
							</ul>	
							<div  id="tab-empty1" 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 loadParams = {
				pageNumber: 1, noMore: false
			};
			
			/**
			 * tabIndex 选项卡索引号  firstLoad 是否首次加载  rateState 评价状态(1已评价 0待评价) noMore 没有更多数据了
			 */
			var loadParams = {
				tabOptions: [
					{ tabIndex: 0 , firstLoad: false , rateState: 1 , pageNumber: 1, noMore: false },
					{ tabIndex: 1 ,  firstLoad: false , rateState: 0 , pageNumber: 1, noMore: false },
				]
			};
			
			
			//初始化下拉刷新、上拉加载控件 
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh(index , selfElement) {
				var loadObject = loadParams.tabOptions[index];
				loadObject.pageNumber = 1;
				loadObject.noMore = false;
				getRateList(loadObject , true , selfElement); 
			}
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh(index , selfElement) {
				var loadObject = loadParams.tabOptions[index];
				if (loadObject.noMore == false){
					getRateList(loadObject , false , selfElement);
				}else{
					selfElement.endPullUpToRefresh(true);//参数为true代表没有更多数据了。
				}
			}
			
			//循环初始化所有下拉刷新,上拉加载。 .mui-slider-group .mui-scroll
			mui.each(document.querySelectorAll('.mui-scroll-wrapper .mui-scroll'), function(index, pullRefreshEl) {
				mui(pullRefreshEl).pullToRefresh({
					down: {
						callback: function() {
							var selfElement = this;
							setTimeout(function(){ 
								pulldownRefresh(index , selfElement);
								selfElement.endPullDownToRefresh();
								//console.log("下拉刷新: " + index);  
							} , 500);	
						}
					}
					,
					up: {
						callback: function() {
							var selfElement = this;
							setTimeout(function() {	
								//console.log("上拉加载: " + index);
								if (index == 0){
									//self.endPullUpToRefresh(loadOrder0Object.noMore); //参数为true代表没有更多数据了。
									pullupRefresh(index , selfElement);
								}else{
									//self.endPullUpToRefresh(loadOrder1Object.noMore); //参数为true代表没有更多数据了。
									pullupRefresh(index , selfElement);
								}
								//alert("下拉刷新 index : " + index + " , 参数 " + JSON.stringify(loadAlarm0Object));
							}, 500);
						}
					}	
				});
			});	
			
			
			//选项卡切换事件
			/** 
			mui(".mui-segmented-control").on('tap','.mui-control-item',function(){
				var tabObject = this;
				var tabIndex =  parseInt(tabObject.getAttribute("data-index"));
				loadParams.loadTabIndex = tabIndex;
				var loadObject = loadParams.tabOptions[tabIndex];
				console.log("选项卡切换事件, tabIndex = " + tabIndex);
				//新任务
				if (loadObject.firstLoad == false){
					getRateList(loadObject ,  false , this);
					console.log("加载选项卡数据,tabIndex = " + tabIndex);
				}
			});
			*/
							
				
			/** 默认自动刷新数据 */
			setTimeout(function(){
				//刷新两个或多个选项卡数据
				/** */
				mui.each(document.querySelectorAll('.mui-scroll-wrapper .mui-scroll'), function(index, pullRefreshEl) {
					mui(pullRefreshEl).pullToRefresh().pullUpLoading();
				});
				
				
			} , 300);
			
			
			/** 
			 * 查询评价信息 (分页查询)
			 * refreshFlag :  刷新标志(true / false)。如果是刷新则加载第一页数据原来的数据清空;如果是为false 则追加到列表(加载更多)
			 */  
			function getRateList(loadObject , refreshFlag , self){
				var tabIndex = loadObject.tabIndex;
				var postData = {
					rateState: loadObject.rateState,
					pageNumber: loadObject.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-empty' + tabIndex);
								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("itemList" + tabIndex);
								//判断是刷新 还是 加载更多
								if (refreshFlag == true){
									self.refresh(true);//重置控件:解决上拉分页查询所有数据后,下拉刷新显示的数据列表无法上拉操作(提示没有更多数据)
									//下拉刷新数据时,直接将列表内容显示为当前已刷新的内容
									itemListObject.innerHTML = htmlContent;
								}else{
									self.endPullUpToRefresh(loadObject.noMore);//参数为true代表没有更多数据了。
									//上拉加载数据时,将当前数据追加到咧白哦中。
									itemListObject.insertAdjacentHTML("beforeEnd" , htmlContent);
								}
								//处理加载信息: 当当前当页等于总页数
								if (pagerObject.pageNum == pagerObject.pages){ 
									loadObject.noMore = true;
								}else{
									var pageNumber = pagerObject.pageNum;
									loadObject.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>


之前的一篇文章已完成刷新多个选显卡,这篇是在那篇文章的内容进行优化:

需求1:有时候,在多选卡页页面时,做了一些操作需要自动显示及刷新指定的选项卡。所以之前那篇文章的内容是无法满足现在的需求。所以现在需要对之前的代码进行优化:

网上查阅了相关资料,切换到指定选项卡使用下面这种方式:
 

	mui('.mui-slider').slider().gotoItem(tabIndex);

但是通过测试,发现有个问题:当当前选项卡已经为激活状态时,再调用上面的代码,是无法刷新当前选项卡页面数据的。写一个选项卡切换及刷新数据的函数,继续优化一下代码就可以了:

//refreshTab(0);
function refreshTab(tabIndex){
		   
	//已经是当前选项卡,则刷新数据
	var newActiveEl = document.getElementById("mui-control-item" + tabIndex);
	if (newActiveEl.classList.contains("mui-active") == true){
		//只刷新数据
		var selectClassName = ".mui-scroll-wrapper.item" + tabIndex;
		var refreshTabElement = document.querySelector(selectClassName + " .mui-scroll");
		$(refreshTabElement).pullToRefresh().pullDownLoading();		 
	 }else{
		//切换到指定的选项卡
		mui('.mui-slider').slider().gotoItem(tabIndex);
	}
 }


需求2:有时候,需要触发左右移动时,自动切换选项卡及刷新选项卡内容。左右选项卡刷新代码:

//选项卡左右移动事件处理
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
	//注意slideNumber是从0开始的;
	//document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
	// console.log(" 监听选项卡左右事件: 当前选项卡索引为 " +event.detail.slideNumber);
	var index = event.detail.slideNumber;
	var muiActiveEl = document.querySelector(".mui-control-item.mui-active");
	var newActiveEl = document.getElementById("mui-control-item" + index);
	muiActiveEl.classList.remove("mui-active"); 
	newActiveEl.classList.add("mui-active");
    //刷新对应选项卡数据	
    //loadParams.tabOptions.tabIndex = index;
	//pulldownRefresh(index , newActiveEl);
});

最终代码:

<!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 style="padding: 10px 10px;z-index: 1000;">
					<div id="segmentedControl" class="mui-segmented-control">
						<a class="mui-control-item mui-active" data-index="0" href="#item0">已评价</a>
						<a class="mui-control-item" data-index="1" href="#item1" >待评价</a>
					</div>
				</div>
				
				<div class="mui-slider-group"> 
					<!-- 已评价 -->
					<div id="item0" class="mui-slider-item mui-control-content">
						<div  class="mui-scroll-wrapper item0">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="itemList0">	
								已评价内容
								</ul>					
								<div id="tab-empty0" wdith="100%" style="text-align: center;"><img src="image/icon_empty.png" style="width: 200px;height: 200px;"></div>
							</div>
						</div> 
					</div>
					
					<!-- 待评价 -->
					<div id="item1" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper item1">
							<div class="mui-scroll">
							<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="itemList1">
							待评价内容
							</ul>	
							<div  id="tab-empty1" 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 loadParams = {
				pageNumber: 1, noMore: false
			};
			
			/**
			 * tabIndex 选项卡索引号  firstLoad 是否首次加载  rateState 评价状态(1已评价 0待评价) noMore 没有更多数据了
			 */
			var loadParams = {
				tabOptions: [
					{ tabIndex: 0 , firstLoad: false , rateState: 1 , pageNumber: 1, noMore: false },
					{ tabIndex: 1 ,  firstLoad: false , rateState: 0 , pageNumber: 1, noMore: false },
				]
			};
			
			
			//初始化下拉刷新、上拉加载控件 
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh(index , selfElement) {
				var loadObject = loadParams.tabOptions[index];
				loadObject.pageNumber = 1;
				loadObject.noMore = false;
				getRateList(loadObject , true , selfElement); 
			}
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh(index , selfElement) {
				var loadObject = loadParams.tabOptions[index];
				if (loadObject.noMore == false){
					getRateList(loadObject , false , selfElement);
				}else{
					selfElement.endPullUpToRefresh(true);//参数为true代表没有更多数据了。
				}
			}
			
			//循环初始化所有下拉刷新,上拉加载。 .mui-slider-group .mui-scroll
			mui.each(document.querySelectorAll('.mui-scroll-wrapper .mui-scroll'), function(index, pullRefreshEl) {
				mui(pullRefreshEl).pullToRefresh({
					down: {
						callback: function() {
							var selfElement = this;
							setTimeout(function(){ 
								pulldownRefresh(index , selfElement);
								selfElement.endPullDownToRefresh();
								//console.log("下拉刷新: " + index);  
							} , 500);	
						}
					}
					,
					up: {
						callback: function() {
							var selfElement = this;
							setTimeout(function() {	
								//console.log("上拉加载: " + index);
								if (index == 0){
									//self.endPullUpToRefresh(loadOrder0Object.noMore); //参数为true代表没有更多数据了。
									pullupRefresh(index , selfElement);
								}else{
									//self.endPullUpToRefresh(loadOrder1Object.noMore); //参数为true代表没有更多数据了。
									pullupRefresh(index , selfElement);
								}
								//alert("下拉刷新 index : " + index + " , 参数 " + JSON.stringify(loadAlarm0Object));
							}, 500);
						}
					}	
				});
			});	
			
			
			//选项卡切换事件
			/** 
			mui(".mui-segmented-control").on('tap','.mui-control-item',function(){
				var tabObject = this;
				var tabIndex =  parseInt(tabObject.getAttribute("data-index"));
				loadParams.loadTabIndex = tabIndex;
				var loadObject = loadParams.tabOptions[tabIndex];
				console.log("选项卡切换事件, tabIndex = " + tabIndex);
				//新任务
				if (loadObject.firstLoad == false){
					getRateList(loadObject ,  false , this);
					console.log("加载选项卡数据,tabIndex = " + tabIndex);
				}
			});
			*/
							

        //选项卡左右移动事件处理
        document.querySelector('.mui-slider').addEventListener('slide', function(event)               {
	//注意slideNumber是从0开始的;
	//document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
	// console.log(" 监听选项卡左右事件: 当前选项卡索引为 " +event.detail.slideNumber);
	var index = event.detail.slideNumber;
	var muiActiveEl = document.querySelector(".mui-control-item.mui-active");
	var newActiveEl = document.getElementById("mui-control-item" + index);
	muiActiveEl.classList.remove("mui-active"); 
	newActiveEl.classList.add("mui-active");
    //刷新对应选项卡数据	
    //loadParams.tabOptions.tabIndex = index;
	//pulldownRefresh(index , newActiveEl);
});


//自动刷新指定选项卡
//refreshTab(0);
function refreshTab(tabIndex){
		   
	//已经是当前选项卡,则刷新数据
	var newActiveEl = document.getElementById("mui-control-item" + tabIndex);
	if (newActiveEl.classList.contains("mui-active") == true){
		//只刷新数据
		var selectClassName = ".mui-scroll-wrapper.item" + tabIndex;
		var refreshTabElement = document.querySelector(selectClassName + " .mui-scroll");
		$(refreshTabElement).pullToRefresh().pullDownLoading();		 
	 }else{
		//切换到指定的选项卡
		mui('.mui-slider').slider().gotoItem(tabIndex);
	}
 }


				
			/** 默认自动刷新数据 */
			setTimeout(function(){
				//刷新两个或多个选项卡数据
				/** */
				mui.each(document.querySelectorAll('.mui-scroll-wrapper .mui-scroll'), function(index, pullRefreshEl) {
					mui(pullRefreshEl).pullToRefresh().pullUpLoading();
				});
				
				
			} , 300);
			
			
			/** 
			 * 查询评价信息 (分页查询)
			 * refreshFlag :  刷新标志(true / false)。如果是刷新则加载第一页数据原来的数据清空;如果是为false 则追加到列表(加载更多)
			 */  
			function getRateList(loadObject , refreshFlag , self){
				var tabIndex = loadObject.tabIndex;
				var postData = {
					rateState: loadObject.rateState,
					pageNumber: loadObject.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-empty' + tabIndex);
								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("itemList" + tabIndex);
								//判断是刷新 还是 加载更多
								if (refreshFlag == true){
									self.refresh(true);//重置控件:解决上拉分页查询所有数据后,下拉刷新显示的数据列表无法上拉操作(提示没有更多数据)
									//下拉刷新数据时,直接将列表内容显示为当前已刷新的内容
									itemListObject.innerHTML = htmlContent;
								}else{
									self.endPullUpToRefresh(loadObject.noMore);//参数为true代表没有更多数据了。
									//上拉加载数据时,将当前数据追加到咧白哦中。
									itemListObject.insertAdjacentHTML("beforeEnd" , htmlContent);
								}
								//处理加载信息: 当当前当页等于总页数
								if (pagerObject.pageNum == pagerObject.pages){ 
									loadObject.noMore = true;
								}else{
									var pageNumber = pagerObject.pageNum;
									loadObject.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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值