mui框架被定位为“最接近原生体验的移动App的UI框架”。
写下mui框架中常用的两个功能，下拉刷新和上拉加载，没有后台交互，用js写假数据模拟，下面直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉和上拉加载demo</title>
<link rel="stylesheet" type="text/css" href="mui/css/mui.css">
</head>
<body>
<script type="text/javascript" src="mui/js/mui.js"></script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">下拉和上拉加载更多</h1>
</header>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
//加载刷新的li
</ul>
</div>
</div>
<script type="text/javascript">
mui.init({
pullRefresh:{
container:'#pullrefresh',
down:{
callback:pulldownRefresh
},
up:{
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
}); // 下拉刷新callback
function pulldownRefresh(){
setTimeout(function(){
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell')
for(var i = cells.length,len = i + 3;i<len;i++){//下拉刷新三个li。
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item'+(i+1)+'</a>';
//下拉刷新的东西要插到最前面；
table.insertBefore(li,table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
},1500);
} //上拉加载callback
var times = 0;
function pullupRefresh() {
setTimeout(function(){
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++times > 2)); //参数为true代表没有更多数据了,则执行endPullupToRefresh（）方法结束上拉加载。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 20; i < len; i++) {//上拉加载20个li
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item' + (i + 1) + '</a>';
table.appendChild(li);
}
},1500);
}
if (mui.os.plus) {
mui.plusReady(function(){
setTimeout(function(){
mui('#pullrefresh').pullRefresh().pullupLoading();
},1000);
});
} else {
mui.ready(function(){
mui('#pullrefresh').pullRefresh().pullupLoading();
});
} </script>
</body>
</html>
上个效果图：
