如何使用MUI框架模擬手機(jī)端的下拉刷新和上拉加載功能

小編給大家分享一下如何使用MUI框架模擬手機(jī)端的下拉刷新和上拉加載功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),響應(yīng)式網(wǎng)站開發(fā),網(wǎng)頁設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:18982081108

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

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

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

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

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

<!--下拉刷新容器-->
<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>

然后進(jìn)行初始化操作，通過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:'沒有更多數(shù)據(jù)了',//可選，請(qǐng)求完畢若沒有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容；
 callback :pullfresh-function //必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來編寫，比如通過ajax從服務(wù)器獲取新數(shù)據(jù)；
 }
 }
});

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

下面舉一個(gè)很簡(jiǎn)單的例子：（實(shí)現(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>

一會(huì)要將數(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)識(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:'沒有更多數(shù)據(jù)了',//可選，請(qǐng)求完畢若沒有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容；
    callback: function () {//必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來編寫，比如通過ajax從服務(wù)器獲取新數(shù)據(jù)；
     /*每次加載動(dòng)態(tài)的添加一個(gè)li*/
     $("#testUl").append($("<li>" + new Date() + "</li>"));
     this.endPullupToRefresh(false);
    } 
    }
    }
    });
</script>

callback參數(shù)中，寫的是加載函數(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í)間。

以上是“如何使用MUI框架模擬手機(jī)端的下拉刷新和上拉加載功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：如何使用MUI框架模擬手機(jī)端的下拉刷新和上拉加載功能
文章網(wǎng)址：http://muchs.cn/article44/pihhee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、Google、、App開發(fā)、ChatGPT、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作