本文介绍如何在MUI框架中实现带有上拉刷新、下拉加载功能的多选项卡组件，并通过示例代码展示了如何展示不同状态的数据，如已评价和待评价内容。
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之上拉刷新、下拉加载数据 ：
我们网上购物时，下订单后，通常有几种状态：全部、待付款、待发货、待收货、待评价等功能。上一篇的内容只适合加载指定某种状态数据 或 全部数据。如果需要在页面中显示多种状态数据，这个时候就需要使用选项卡组件了。
下面将实现我的评价功能：显示已评价和待评价内容。
1、添加页面，完善上拉刷新下拉加载功能（多选项卡）
新建 refreshTabs.html 文件，完善页面代码：
<!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>
注意：本例子不包含后台接口程序，后台接口主要完成数据分页功能，主要返回数据列表、当前页、总页数等内容。后台返回数据的字段名不一致，则需要修改上面的代码。
2、多选项卡页面效果图
注意：因为没有跟后台相关关联，页面提示了 ’连接服务器超时 ‘ 错误 。页面遮罩加载提示内容如果不需要页可以去掉（使用了上一篇文中 ajax 封装的请求 js ）。
细节问题
上拉分页查询所有数据后，下拉刷新显示的数据列表无法上拉操作（提示没有更多数据）
解决办法： 刷新控件执行.refresh(true);//重置控件：解决上拉分页查询所有数据后，下拉刷新显示的数据列表无法上拉操作（提示没有更多数据）
链接：https://pan.baidu.com/s/1W5hKd_TH6RzMalW3xeiTEg
提取码：5cdy
扫一扫
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
