mui:选项卡切换+下拉刷新+ajax
因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据，在网上也没有很好的办法，比较喜欢简单粗暴就直接上代码了。
1.mui:选项卡切换+下拉刷新+ajax
1.1关于mui的选项卡切换的样式，mui的官网上有，在这就不多说了
1.2 直接上代码
<!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="/css/mui.min.css">
</head>
<body>
<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 gooding">
<div class="blueHeaderBg"></div>
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="titleList">
<a class="mui-control-item paddingNone mui-active " href="#item1mobile" data-id="0" >
全部
</a>
<a class="mui-control-item paddingNone" href="#item2mobile" data-id="1" >
待审核
</a>
<a class="mui-control-item paddingNone" href="#item3mobile" data-id="2" >
派单中
</a>
<a class="mui-control-item paddingNone" href="#item4mobile" data-id="3">
已完成
</a>
<input type="hidden" id="status" value="0">
</div>
</div>
<div class="mui-slider-group">
<!--全部-->
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
</ul>
</div>
</div>
</div>
<!--待审核-->
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
</ul>
</div>
</div>
</div>
<!--派单中-->
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
</ul>
</div>
</div>
</div>
<!--已完成-->
<div id="item4mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/Scripts/MUI/mui.min.js"></script>
//选项卡中的下拉功能是采用的下面的插件，和mui.min,js里自带的下拉功能不一样，但是api是基本一致的，别的网站和官网都有描述，请自行查阅
<script src="/Scripts/MUI/mui.pullToRefresh.js"></script>
<script src="/Scripts/MUI/mui.pullToRefresh.material.js"></script>
<script>
(function ($) {
//阻尼系数
var deceleration = mui.os.ios ? 0.003 : 0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
//因为是四个不同的区块，每一个页数不一样，所以要存不同的页数
var pageNum=null;
var pageNum1=1;
var pageNum2=1;
var pageNum3=1;
var pageNum4=1;
$.ready(function () {
//循环初始化所有下拉刷新，上拉加载。
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
$(pullRefreshEl).pullToRefresh({
up: {
auto: true, //自动执行一次上拉加载，可选；
show: false, //显示底部上拉加载提示信息，可选；
contentrefresh: '正在加载...', //上拉进行中提示信息
contentnomore: '没有更多数据了', //上拉无更多信息时提示信息
callback:function () {
var self = this;
setTimeout(function () {
//获取四个不同的区块显示的位置
var ul = self.element.querySelector('.mui-table-view');
if(index == 0){//全部选项卡的index是0，当显示它的时候，滑动页面加1，调数据，以下以此类推
pageNum=pageNum1++;
createFragment(ul, index,self,pageNum);
}else if(index == 1){
pageNum=pageNum2++;
createFragment(ul, index,self,pageNum);
}else if(index == 2){
pageNum=pageNum3++;
createFragment(ul, index,self,pageNum);
}else if(index == 3){
pageNum=pageNum4++;
createFragment(ul, index,self,pageNum);
}
}, 100);
}
}
});
});
});
})(mui);
function createFragment(ul, index,self,pageNum) {
var fragment = document.createDocumentFragment();
var li;
li = document.createElement('li');
// li.className = 'mui-table-view-cell';
var status=null;//这是传给后台参数状态
if(index == 0){
status=0;;//为0的时候是全部
}else if(index == 1){
status=1;//为1的时候是待审核
}else if(index == 2){
status=2;//为2的时候是派单中
}else if(index == 3){
status=3;//为3的时候是已完成
}
var page_size = 10;//传给后台的参数，想要几条数据
var data = {
page:pageNum,//页数
page_size:page_size,//想要几条数据
status: status,//状态
};
//请求后台数据
$.getJSON('order/list', data, function (info) {
var str='';
var datas = info.data;
if(datas.length == 0){//当datas.length为0时，表示没有数据了
self.endPullUpToRefresh(true);//当为true时，底部出现没有更多数据，并且不能滑动
}else{
for (var i = 0; i < datas.length; i++) {
cold = datas[i];
str+='<div class="mui-card listOrder">'
+'<div class="mui-card-header">'
+'<a class="orderNumber">订单号：'+cold['order_no']+'</a>'
+'<a class="orderType">'+cold['status']+'</a>'
+'</div>'
+'<div class="mui-card-content">'
+'<ul class="contractUl">'
+'<li>始发地：山东省莱芜市邻水县</li>'
+'<li>收货地：山东省莱芜市邻水县</li>'
+'<li>期望费用：'+cold['expected_cost']+'</li>'
+'<li>收货人：'+cold['end_linkman']+'</li>'
+'<li>货物名称：'+cold['goods_name']+'</li>'
+'<li><span>手机号：'+cold['end_mobile']+'</span><span class="contractsR">温度要求：'+cold['temperature_requirement']+'</span>'
+'</li></ul></div>'
+'<div class="mui-card-footer">'
+'<a class="mui-card-link"></a>'
+'<a class=" btnStyle" href="myOrderInfo.html">查看详情</a>'
+'</div></div>';
li.innerHTML=str;
fragment.appendChild(li);
}
ul.appendChild(fragment);//注意一定要插入使用appendChild，不是替换里面的数据用innerHTML,否则会出现没有文字提醒以及会出现很大的空白区
self.endPullUpToRefresh();//当为false或空时，底部出现正在加载，滑动到下一页
}
});
};
</script>
</body>
</html>
1.3 做重点描述
（1）mui的html的结构以及里的class要按照我上面的写法来写，要不然部分内容不会插入到页面中，划屏效果以及滚动效果出不来。我写的样式是驼峰命名的，如果不用请自行删除，保留mui的class。
（2）这个demo用到的插件是mui.pullToRefresh.js以及mui.pullToRefresh.material.js是选项卡下拉加载
（3）$.each，如同jquery的用法一样，index代表索引，pullRefreshEl代表每一个元素。
（4）其重点在代码中做了注释，不在多说，当时是为了完成功能写的代码，并没有进行优化
这是我项目的最终效果图，此文章重点描述如何选项卡+下拉加载与ajax使用