mui 上拉加載更多的使用
阿新 • • 發佈：2018-08-28
div add spa con itl 文檔 get 上拉加載更多 tap
最近工作之余在用mui的框架開發，對mui了解了一些。在真正的app開發項目中，mui上拉加載模塊中有兩個坑，現在說一下。
1、在函數自己上拉加載行為後的回調函數
該函數是必須要寫的，用來寫自己的邏輯需求，但是一般情況下，需要設置顯示為“加載更多”還是“沒有更多數據了”。
看了一些博客和官方文檔，基本上都把這個設置放在了定時器中
在定時器中調用獲取數據的方法（自己的業務需求）
2、在mui封裝的上拉加載中，點擊某一項會失效。這個是真的很坑。不過網上也有解決方法。就是采用事件監聽的方式，阻止默認行為
mui(‘選擇器‘).on(‘tap‘,‘選擇器‘,function(e){ e.preventDefault();//自己的業務邏輯 })
一開始我將上述代碼放在了mui.plusready()函數裏面，可是事件並沒有觸發，所以，當我將它mui.plusready()中拿出來，事件就起作用了，我並不知道這是為什麽，如果你偶爾看到這篇文章，可以告訴我一下。
我將這個使用demo放在了自己的gitHub上，網址：https://github.com/dreamITGirl/projectStudy/blob/master/html/mui%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD.html
在博客中也貼一下代碼
<!DOCTYPE html> <html> <headlang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> <script> window.onload = function () { /*750代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這裏寫100是 為了以後好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/ getRem(750, 100) }; window.onresize = function () { getRem(750, 100) }; function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.style.fontSize = oWidth / pwidth * prem + "px"; } </script> <link rel="stylesheet" href="../css/mui.min.css"/> <link rel="stylesheet" href="../css/reset.css"/> <title>關於mui的上拉加載</title> <style> .mui-content { background: #fff; } h2 { font-size: 0.28rem; line-height: .6rem; padding-left: 10px; } .mui-scroll-wrapper { top: .75rem; } </style> </head> <body> <div class="mui-content"> <h2>上拉加載</h2> <div class="mui-scroll-wrapper" id="pullRefresh"> <div class="mui-scroll"> <ul class="mui-table-view" id="listContainer"> <li class="mui-table-view-cell"> list1 </li> <li class="mui-table-view-cell"> list2 </li> <li class="mui-table-view-cell"> list3 </li> <li class="mui-table-view-cell"> list4 </li> </ul> </div> </div> </div> <script src="../js/jquery-2.1.3.min.js"></script> <script src="../js/mui.min.js"></script> <script> (function ($, doc) { var listContainer = doc.getElementById(‘listContainer‘); mui.init({ pullRefresh: { container: ‘#pullRefresh‘,//待刷新區域標識，querySelector能定位的css選擇器均可，比如：id、.class等 up: { height: 50,//可選.默認50.觸發上拉加載拖動距離 auto: true,//可選,默認false.自動上拉加載一次 contentrefresh: "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容 contentnomore: ‘沒有更多數據了‘,//可選，請求完畢若沒有更多數據時顯示的提醒內容； callback: pullfreshFunc //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據； } } }); var flag = true, counter = 1, pageSize = 10; function pullfreshFunc() { setTimeout(function () { mui(‘#pullRefresh‘).pullRefresh().endPullupToRefresh(flag);//參數為true代表沒有更多數據了。 getData(); }, 500); } function getData() { mui.ajax({ type: ‘get‘, url: ‘../json/data.json‘, data: {‘counter‘: counter}, success: function (response) { console.log(response); let list = response.peopleList; let html = ""; flag = !(list[0] == null || list[0] == "" || !list[0]); if (flag) { counter++; } for (let i = 0; i < list.length; i++) { html += ‘<li class="mui-table-view-cell">‘ + list[i].name + ‘</li>‘; } jQuery(‘#listContainer‘).append(html) }, error: function (error) { console.log(error) } }) } //點擊單項事件 // mui中上拉加載中的坑1：點擊事件失效(不需要放在mui.plusReady（）中) mui(‘#pullRefresh‘).on(‘tap‘, ‘li.mui-table-view-cell‘, function (e) { e.preventDefault(); console.log(‘觸發點擊事件了‘) }) }(mui, document)) </script> </body> </html>
mui 上拉加載更多的使用