使用MUI框架模擬手機端的下拉刷新和上拉加載功能

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:31:14

使用MUI框架模擬手機端的下拉刷新和上拉加載功能

使用MUI框架模擬手機端的下拉刷新和上拉加載功能:mui框架基于htm5plus的XMLHttpRequest，封裝了常用的Ajax函數(shù)，支持GET、POST請求方式，支持返回json、xml、html、text、script數(shù)據(jù)類型；本著極簡的設(shè)計原則，mui提供了mui.ajax方法，并在mui.ajax方法基礎(chǔ)上，進一步簡化出最常用的mui.get

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀使用MUI框架模擬手機端的下拉刷新和上拉加載功能:mui框架基于htm5plus的XMLHttpRequest，封裝了常用的Ajax函數(shù)，支持GET、POST請求方式，支持返回json、xml、html、text、script數(shù)據(jù)類型；本著極簡的設(shè)計原則，mui提供了mui.ajax方法，并在mui.ajax方法基礎(chǔ)上，進一步簡化出最常用的mui.get

mui框架基于htm5plus的XMLHttpRequest，封裝了常用的Ajax函數(shù)，支持GET、POST請求方式，支持返回json、xml、html、text、script數(shù)據(jù)類型；本著極簡的設(shè)計原則，mui提供了mui.ajax方法，并在mui.ajax方法基礎(chǔ)上，進一步簡化出最常用的mui.get()、mui.getJSON()、mui.post()三個方法。

套用mui官方文檔的一句話：“開發(fā)者只需關(guān)心業(yè)務(wù)邏輯，實現(xiàn)加載更多數(shù)據(jù)即可”。真的是不錯的框架。

想更多的了解這個框架：http://dev.dcloud.net.cn/mui/

那么如何實現(xiàn)下拉刷新，上拉加載的功能呢？

首先需要一個容器：

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
　　<div class="mui-scroll">
　　<!--數(shù)據(jù)列表-->
　　　　<ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
　　</div>
</div>

然后進行初始化操作，通過mui.init方法中pullRefresh參數(shù)配置上拉加載各項參數(shù)：

mui.init({
 pullRefresh : {
 container:refreshContainer,//待刷新區(qū)域標(biāo)識，querySelector能定位的css選擇器均可，比如：id、.class等
 up : {
 height:50,//可選.默認50.觸發(fā)上拉加載拖動距離
 auto:true,//可選,默認false.自動上拉加載一次
 contentrefresh : "正在加載...",//可選，正在加載狀態(tài)時，上拉加載控件上顯示的標(biāo)題內(nèi)容
 contentnomore:'沒有更多數(shù)據(jù)了',//可選，請求完畢若沒有更多數(shù)據(jù)時顯示的提醒內(nèi)容；
 callback :pullfresh-function //必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來編寫，比如通過ajax從服務(wù)器獲取新數(shù)據(jù)；
 }
 }
});

這里重點關(guān)注callback參數(shù)項，為必選內(nèi)容，里邊寫刷新函數(shù)，根據(jù)具體的業(yè)務(wù)來寫，在實際項目中，通常是通過ajax從服務(wù)器獲取數(shù)據(jù)，然后進行html的動態(tài)拼接，形成數(shù)據(jù)項。

下面舉一個很簡單的例子：（實現(xiàn)上拉加載的功能）

容器：

 <!--下拉刷新容器-->
 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
　　<div class="mui-scroll">
　　<!--數(shù)據(jù)列表-->
 　　　　<ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
　　</div>
 </div>

一會要將數(shù)據(jù)放到 id=“testUl”的ul標(biāo)簽下，id當(dāng)然隨便取

調(diào)用mui.init方法：

<script type="text/javascript">
 mui.init({
 pullRefresh : {
 container:refreshContainer,//待刷新區(qū)域標(biāo)識，querySelector能定位的css選擇器均可，比如：id、.class等
 up : {
 height:50,//可選.默認50.觸發(fā)上拉加載拖動距離
 auto:true,//可選,默認false.自動上拉加載一次
 contentrefresh : "正在加載...",//可選，正在加載狀態(tài)時，上拉加載控件上顯示的標(biāo)題內(nèi)容
 contentnomore:'沒有更多數(shù)據(jù)了',//可選，請求完畢若沒有更多數(shù)據(jù)時顯示的提醒內(nèi)容；
 callback: function () {//必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來編寫，比如通過ajax從服務(wù)器獲取新數(shù)據(jù)；
 /*每次加載動態(tài)的添加一個li*/
 $("#testUl").append($("<li>" + new Date() + "</li>"));
 this.endPullupToRefresh(false);
 } 
 }
 }
 });
</script>

callback參數(shù)中，寫的是加載函數(shù)，每次加載，動態(tài)生成一個li標(biāo)簽，用當(dāng)前時間作為測試數(shù)據(jù)，貼到id=testUl的ul標(biāo)簽之下。

這里注意callback中的function最后的 this.endPullupToRefresh(false); 表示結(jié)束加載，參數(shù)可選true或false，true表示結(jié)束加載，false繼續(xù)加載，在實際項目應(yīng)用中，通常要根據(jù)服務(wù)器回傳的數(shù)據(jù)量做一下判斷。

over!! 這樣每次上拉，都會加載一條當(dāng)前的時間。

總結(jié)

以上所述是小編給大家介紹的使用MUI框架模擬手機端的下拉刷新和上拉加載功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com