mui框架上下拉加载
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>
上个效果图: