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

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

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

首先需要一個(gè)容器：

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

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

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

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

?

?

?

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

容器：

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

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

?

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

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

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

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

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/caojiannan/p/7470248.html

總結(jié)

以上是生活随笔為你收集整理的使用MUI框架，模拟手机端的下拉刷新，上拉加载操作。的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。