mui實現列表的下拉刷新上拉加載

1、引入mui控件的js文件和css樣式文件

<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>

2、完善列表容器：.mui-scroll-wrapper為滾動容器，.mui-scroll為滾動主體，里邊內容不限。

<div id="pullrefresh" class="mui-scroll-wrapper">
    <div class="mui-scroll">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">data</li>
            <li class="mui-table-view-cell">data</li>
        </ul>
    </div>
</div>

 

3、初始化mui控件：初始化會生成部分mui需要用到的控件，給容器和列表綁定事件。

mui.init({ 
 pullRefresh : {
　　 swipeBack: false, //關閉左滑關閉功能
    container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器均可，比如：id、.class等
    down : {
      style:'circle',//必選，下拉刷新樣式，目前支持原生5+ ‘circle’ 樣式
      color:'#2BD009', //可選，默認“#2BD009” 下拉刷新控件顏色
      height:'50px',//可選,默認50px.下拉刷新控件的高度,
      range:'100px', //可選 默認100px,控件可下拉拖拽的范圍
      offset:'0px', //可選 默認0px,下拉刷新控件的起始位置
      auto: true,//可選,默認false.首次加載自動上拉刷新一次
      callback :pulldownRefresh //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
   },
　　up:{
　　　　contentrefresh: '正在加載...',
　　　　contentnomore:'沒有更多數據了',
　　　　callback:pulluploading //上拉加載下一頁
　　}

});

4、定義下拉刷新列表方法 pulldownRefresh()

mui.ajax("請求url", {
    type: "get",
    dataType: "json",
    data:{
            param:param,
            name:name
        },
        success: function(data){
             //將獲取到的數據動態賦值給列表，假設scroller為滾動容器
             //如果數據不到一頁，顯示“沒有更多數據了”,關閉上拉功能
             //scroller.endPullupToRefresh(true);
             //scroller.querySelector(".mui-pull-bottom-pocket .mui-pull-caption").innerHTML = "沒有更多數據了";
             //如果對於關閉的上拉功能，可以通過以下語句重置上拉加載功能。
             //mui('#pullrefresh').pullRefresh().refresh(true);
        }
});  

5、定義上拉加載功能：pulluploading()該方法同下拉刷新相似。（最后一頁關閉上拉加載、提示沒有數據參考下拉刷新。）

6、多頁數據提示：列表下方提示及下拉刷新效果

 

尾頁頁面效果：scroller.endPullupToRefresh(true);