使用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.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ū)域標識,querySelector能定位的css選擇器均可,比如:id、.class等 up : { height:50,//可選.默認50.觸發(fā)上拉加載拖動距離 auto:true,//可選,默認false.自動上拉加載一次 contentrefresh : "正在加載...",//可選,正在加載狀態(tài)時,上拉加載控件上顯示的標題內(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標簽下,id當然隨便取
調(diào)用mui.init方法:
<script type="text/javascript"> mui.init({ pullRefresh : { container:refreshContainer,//待刷新區(qū)域標識,querySelector能定位的css選擇器均可,比如:id、.class等 up : { height:50,//可選.默認50.觸發(fā)上拉加載拖動距離 auto:true,//可選,默認false.自動上拉加載一次 contentrefresh : "正在加載...",//可選,正在加載狀態(tài)時,上拉加載控件上顯示的標題內(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標簽,用當前時間作為測試數(shù)據(jù),貼到id=testUl的ul標簽之下。
這里注意callback中的function最后的 this.endPullupToRefresh(false); 表示結(jié)束加載,參數(shù)可選true或false,true表示結(jié)束加載,false繼續(xù)加載,在實際項目應(yīng)用中,通常要根據(jù)服務(wù)器回傳的數(shù)據(jù)量做一下判斷。
over!! 這樣每次上拉,都會加載一條當前的時間。
總結(jié)
以上所述是小編給大家介紹的使用MUI框架模擬手機端的下拉刷新和上拉加載功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
js 實現(xiàn)Material UI點擊漣漪效果示例
這篇文章主要為大家介紹了js 實現(xiàn)Material UI點擊漣漪效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09Typescript類型系統(tǒng)FLOW靜態(tài)檢查基本規(guī)范
這篇文章主要為大家介紹了Typescript語言的類型系統(tǒng)FLOW靜態(tài)檢查基本規(guī)范,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-05-05js實現(xiàn)保存文本框內(nèi)容為本地文件兼容IE,chrome,火狐瀏覽器
本文實現(xiàn)了利用JS保存頁面中文本框內(nèi)容到本地,并另存為指定文件擴展名與編碼類型,兼容IE,chrome,火狐等瀏覽器2018-02-02