基于 MUI 自带的功能, 进行了微调.
JS 和 CSS 直接引用 MUI 的即可.
下面直接贴上 html 代码. 大家自行调整.
- <!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>
- <!-- 下拉刷新容器 -->
- <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
- <div class="mui-scroll">
- <!-- 数据列表 -->
- <div class="mui-table-view mui-table-view-chevron">
- </div>
- </div>
- </div>
- <script src="JS/mui.min.JS"></script>
- <script>
- mui.init({
- pullRefresh: {
- container: '#pullrefresh',
- down: {
- callback: pulldownRefresh
- },
- up: {
- contentrefresh: '正在加载...',
- callback: pullupRefresh
- }
- }
- });
- /**
- * 下拉刷新具体业务实现
- */
- function pulldownRefresh() {
- setTimeout(function() {
- var table = document.body.querySelector('.mui-table-view');
- var cells = document.body.querySelectorAll('.mui-table-view-cell');
- location.reload();
- // for (var i = cells.length, len = i + 10; i <len; i++) {
- // var li = document.createElement('div');
- //
- // li.className = 'mui-table-view-cell';
- // li.innerHTML = '<div>'+123123+'</div>'
- //// 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(); //refresh completed
- }, 1500);
- }
- var count = 0;
- /**
- 上拉加载具体业务实现
- */
- function pullupRefresh() {
- setTimeout(function() {
- mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count> 2)); // 参数为 true 代表没有更多数据了.
- var table = document.body.querySelector('.mui-table-view');
- var cells = document.body.querySelectorAll('.mui-table-view-cell');
- for (var i = cells.length, len = i + 10; i <len; i++) {
- var li = document.createElement('div');
- li.className = 'mui-table-view-cell';
- li.innerHTML = '<div>'+123123+'</div>'
- table.appendChild(li);
- }
- var page = len/10;
- alert(page)
- }, 1500);
- }
- // if (mui.os.plus) {
- // mui.plusReady(function() {
- // setTimeout(function() {
- // mui('#pullrefresh').pullRefresh().pullupLoading();
- // }, 10);
- //
- // });
- // } else {
- // mui.ready(function() {
- // mui('#pullrefresh').pullRefresh().pullupLoading();
- // });
- // }
- </script>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/23669/f6073073dc416b0b1b2675b76d572537.html