MUI框架的上拉加載列表使用方法
MUI官方稱它輕量、原生、以iOS平臺UI爲基礎，補充部分Android平臺特有的UI控件，
開發工具指定是HBulider莫屬，然後新建Web項目，結構如下：
因爲你的項目裏要大量引入mui擴展插件的css/js，要下載這些文件，你可以再新建一個mui項目，這裏面有MUI所有的組件文件還有示例：
從這個模板裏面拿出你要的文件放進自己的項目：
然後開始造作吧，項目後端還沒通，所有用的假數據：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.dtpicker.js"></script>
<script src="js/mui.poppicker.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link href="css/mui.picker.css" rel="stylesheet"/>
<link href="css/mui.dtpicker.css" rel="stylesheet"/>
<link href="css/mui.poppicker.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style type="text/css">
/*不要學我，樣式寫在外面，我這是示例*/
.timeBtn{
width: 100%;
}
#refreshContainer{
top: 100px;
height: 400px;
border-top: 1px solid #0062CC;
border-bottom: 1px solid #0062CC;
}
.mui-table-view-cell.mui-active{
background-color: #0062CC;
}
</style>
</head>
<body>
<button type="button" class="starttime timeBtn" id="starttime">開始日期</button>
<button type="button" class="endtime timeBtn" id="endtime">結束日期</button>
<!-- 滾動容器 -->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--數據列表-->
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
<script>
// 日期組件
document.getElementById('starttime').addEventListener('tap', function(){
option={"type":"date","beginYear":"1980","endYear":"2080"};
var picker = new mui.DtPicker(option);
picker.show(function(rs) {
document.getElementById('starttime').innerHTML = rs.text;
});
},false);
//結束時間
document.getElementById('endtime').addEventListener('tap', function(){
option={"type":"date","beginYear":"1980","endYear":"2080"};
var picker = new mui.DtPicker(option);
picker.show(function(rs) {
document.getElementById('endtime').innerHTML = rs.text;
});
},false);
// 上拉加載
mui.init({
pullRefresh : {
container: '#refreshContainer',//待刷新區域標識，querySelector能定位的css選擇器均可，比如：id、.class等
up: {
height:50,//可選.默認50.觸發上拉加載拖動距離
auto:true,//可選,默認false.自動上拉加載一次
contentrefresh : "拼命加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
contentnomore:'- 我是有底線的 -',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
callback :pullfreshFun //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
}
}
});
var counter = 10 // 當前頁數
function pullfreshFun () {
var result = ""
// ajax請求list數據 傳入counter頁數
setTimeout(function () {
for (var j = 0; j < counter; j++) {
result += '<li class="mui-table-view-cell">'+counter+'</li>'
}
$('#refreshContainer .mui-scroll .mui-table-view').append($(result))
mui('#refreshContainer').pullRefresh().endPullupToRefresh((++counter>15));// 這個15是你獲取數據的總頁數，當你請求的頁數counter>你的總頁數(後臺獲取或者自己計算)，則結束上拉加載
}, 5000)
}
</script>
</body>
</html>
看一下效果：
壓縮完有些小，湊合看吧