mui框架基于htm5plus的XMLHttpRequest，封裝了常用的Ajax函數，支持GET、POST請求方式，支持返回json、xml、html、text、script數據類型； 本著極簡的設計原則，mui提供了mui.ajax方法，并在mui.ajax方法基礎上，進一步簡化出最常用的mui.get()、mui.getJSON()、mui.post()三個方法。
套用mui官方文檔的一句話：“開發者只需關心業務邏輯，實現加載更多數據即可”。真的是不錯的框架。
想更多的了解這個框架：http://dev.dcloud.net.cn/mui/
那么如何實現下拉刷新，上拉加載的功能呢？
首先需要一個容器：
<!--下拉刷新容器--><div id="refreshContainer" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--數據列表--> <ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul> </div></div>
然后進行初始化操作，通過mui.init方法中pullRefresh參數配置上拉加載各項參數：
mui.init({ pullRefresh : { container:refreshContainer,//待刷新區域標識，querySelector能定位的css選擇器均可，比如：id、.class等 up : { height:50,//可選.默認50.觸發上拉加載拖動距離 auto:true,//可選,默認false.自動上拉加載一次 contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容 contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容； callback :pullfresh-function //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據； } }});這里重點關注callback參數項，為必選內容，里邊寫刷新函數，根據具體的業務來寫，在實際項目中，通常是通過ajax從服務器獲取數據，然后進行html的動態拼接，形成數據項。
下面舉一個很簡單的例子：（實現上拉加載的功能）
容器：
<!--下拉刷新容器--> <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--數據列表--> <ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul> </div> </div>
一會要將數據放到 id=“testUl”的ul標簽下，id當然隨便取
調用mui.init方法：
<script type="text/javascript"> mui.init({ pullRefresh : { container:refreshContainer,//待刷新區域標識，querySelector能定位的css選擇器均可，比如：id、.class等 up : { height:50,//可選.默認50.觸發上拉加載拖動距離 auto:true,//可選,默認false.自動上拉加載一次 contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容 contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容； callback: function () {//必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據； /*每次加載動態的添加一個li*/ $("#testUl").append($("<li>" + new Date() + "</li>")); this.endPullupToRefresh(false); } } } });</script>callback參數中，寫的是加載函數，每次加載，動態生成一個li標簽，用當前時間作為測試數據，貼到id=testUl的ul標簽之下。
這里注意callback中的function最后的 this.endPullupToRefresh(false); 表示結束加載，參數可選true或false，true表示結束加載，false繼續加載，在實際項目應用中，通常要根據服務器回傳的數據量做一下判斷。
over!! 這樣每次上拉，都會加載一條當前的時間。
總結
以上所述是小編給大家介紹的使用MUI框架模擬手機端的下拉刷新和上拉加載功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
