使用mui.js實現下拉重新整理
阿新 • • 發佈：2018-12-09
閒聊：
最近因公司專案需求，小穎需要寫一些html5頁面，方便公司IOS和Android給APP中巢狀使用，其中需要實現拉下重新整理功能，其實就是呼叫了一下mui.js就可以啦嘻嘻，下面跟著小穎一起來看看具體是怎麼實現的吧.
目錄：
效果圖：
mui.min.js、mui.min.css和jquery-3.3.1.js 小穎就不貼上啦，大家在網上百度下載下來就可以啦嘻嘻，小穎就把default.css和index.html檔案粘貼出來哦。
default.css
* { margin: 0; padding: 0; border: 0; } html, body, .view-container{ height: 100%; font-family: PingFangSC-Medium; } .bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; display: none; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .bg .loading { width: 40px; height: 40px; border-radius: 50%; border: 5px solid #BEBEBE; border-left: 5px solid #498aca; animation: load 1s linear infinite; -moz-animation: load 1s linear infinite; -webkit-animation: load 1s linear infinite; -o-animation: load 1s linear infinite; } @-webkit-keyframes load { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes load { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-o-keyframes load { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } .top-title { background: url(../images/2.jpg) no-repeat center; background-size: cover; width: 100%; height: 350px; }
index.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"> <link rel="stylesheet" href="./css/default.css"> </head> <body> <!--下拉重新整理容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <div class="top-title"></div> <!--資料列表--> <ul class="mui-table-view mui-table-view-chevron" id="dataList"></ul> </div> </div> <div class="bg"> <div class="loading"></div> </div> <script src="./js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script src="./js/mui.min.js" type="text/javascript" charset="utf-8"></script> <script> // //進度顯示 $('.bg').css('display', 'flex'); mui.init({ pullRefresh: { container: '#pullrefresh', down: { style: 'circle', callback: pulldownRefresh }, // up: { // auto:true, // contentrefresh: '正在載入...', // callback: pullupRefresh // } } }); var count = 0; function pullupRefresh() { setTimeout(function () { getDt('default'); }, 1500); } pullupRefresh(); function addData() { getDt('down'); } /** * 下拉重新整理具體業務實現 */ function pulldownRefresh() { setTimeout(function () { if (count < 3) { addData(); mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); mui.toast("為你推薦了5篇文章"); } else { mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); mui.toast("沒有更多資料了"); } }, 1500); } function getDt(ways) { count++; var table = document.body.querySelector('.mui-table-view'); var cells = document.body.querySelectorAll('.mui-table-view-cell'); var len; if (ways == 'default') { var newCount = cells.length > 0 ? 5 : 10;//首次載入10條，滿屏 for (var i = cells.length, len = i + newCount; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ' + (i + 1) + '</a>'; table.appendChild(li); } } if (ways == 'down') { for (var i = cells.length, len = i + 5; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ' + (i + 1) + '</a>'; //下拉重新整理，新紀錄插到最前面； table.insertBefore(li, table.firstChild); } } //進度隱藏 $('.bg').css('display', 'none'); } mui('body').on('tap', 'a', function () { window.top.location.href = this.href; }); $('a').ontouchstart = function (e) { e.preventDefault(); }; </script> </body> </html>