最近使用MUI這個框架使用下拉刷新插件的時候，在電腦和蘋果手機測試都沒有問題，但是一上線卻發現安卓打包成APP後無法使用的問題。針對這一問題，博主只想說大家在開發的過程中真的是沒有認真官方的文檔，官方文檔這麼說的：爲實現下拉刷新功能，大多H5框架都是通過DIV模擬下拉回彈動畫，在低端android手機上，DIV動畫經常出現卡頓現象（特別是圖文列表的情況）； mui通過雙webview解決這個DIV的拖動流暢度問題；拖動時，拖動的不是div，而是一個完整的webview（子webview），回彈動畫使用原生動畫；在iOS平臺，H5的動畫已經比較流暢，故依然使用H5方案。
錯誤示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!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>MUI下拉刷新</title> <link href="../css/mui.css" rel="stylesheet"/></head><body><header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">測試下拉刷新列表</h1></header><div class="mui-content"> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--數據列表--> <ul class="mui-table-view mui-table-view-chevron mt50"> <li class="mui-table-view-cell"> <a href="sp-upcoming-test-detail.html" class="mui-navigate-right">人員名稱: monkey</a> </li> </ul> </div> </div></div></body><script src="../js/mui.js"></script><script type="text/javascript" charset="utf-8"> 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'); for (var i = cells.length, len = i + 3; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">人員名稱: ' + (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 + 5; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">人員名稱: monkey ' + (i + 1) + '</a>'; table.appendChild(li); } }, 1500); }</script></html> |
既然說這個是錯誤的例子，那自然就是下拉刷新不兼容安卓的，我們通過這個例子和大家說說爲何不兼容。
官方的下拉刷新分爲3種：
1.單webview下拉刷新
2.雙webview下拉刷新
3.div模擬下拉刷新
在安卓使用的的是雙webview下拉刷新，但是在電腦上面測試的時候，也就是沒有在html5+的環境下測試的時候，是自動給你替換成了div模擬下拉刷新，所以在電腦上面可以看到下拉刷新效果，到了打包之後app裏面之後，就啓用了雙webview下拉刷新的模式，但是沒有按照雙webview下拉刷新的模板去寫，所以在app裏面就失效了。（ios裏面可以正常使用，因爲ios流暢度較高，打包之後，並沒有啓用雙webview下拉刷新的模式，用的還是div下拉刷新模式）。
但是可以對代碼稍微修改一下即可，改成雙webview下拉刷新規範的代碼佈局。
雙webview下拉刷新分爲2個頁面：（主頁面，子頁面）
主頁面：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>主頁面</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="css/mui.min.css"> </head> <body><header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">測試列表</h1></header> </body> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init({ subpages:[{ //調用子頁面刷新的代碼 url:'子頁面的地址', //子頁面的地址 id:'子頁面的id', //子頁面的id，可以自己根據需求隨便設置 styles:{ top: '45px', //子頁面距離頂部的距離 bottom: '0px', //子頁面距離底部的距離 } }] }); </script></html> |
子頁面：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!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> <link href="css/mui.min.css" rel="stylesheet"/></head><body><div class="mui-content"> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--數據列表--> <ul class="mui-table-view mui-table-view-chevron mt50"> <li class="mui-table-view-cell"> <a href="sp-upcoming-test-detail.html" class="mui-navigate-right">人員名稱: 張三</a> </li> </ul> </div> </div></div></body><script src="js/mui.min.js"></script><script type="text/javascript" charset="utf-8"> 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'); for (var i = cells.length, len = i + 3; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">人員名稱: ' + (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 + 5; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">人員名稱: 張三 ' + (i + 1) + '</a>'; table.appendChild(li); } }, 1500); }</script></html> |
這樣就可以實現打包成安卓APP後下拉刷新無兼容問題