1. 程式人生 > >MUI上拉重新整理下拉載入

MUI上拉重新整理下拉載入

使用之前引入檔案


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

 

HTML

//  lt_view 為下拉-上拉的容器  裡面必須加一層巢狀 div   
<div class="lt_view">
    //2 div 為額外新增的巢狀
    <div>
      //3 .lt_content 為存放資料的容器
        <ul class="lt_content">
        資料
        </ul>
    </div>
  </div>

CSS

/* 給最外層容器加上 相對定位 */
.lt_view{
  position: relative;
}

初始化JavaScript的

 mui.init({
  pullRefresh: {
    container: ".lt_view",
    down: {
      auto: true,
      //  觸發下拉重新整理時自動觸發
      callback: function () {
      }
    },
    up:{
      //  觸發上拉重新整理時自動觸發
      callback:function () {
      }
    }
  }
});

API

// 結束下拉重新整理
mui('.lt_view').pullRefresh().endPulldownToRefresh();

// 結束上拉載入更多 如果沒有資料 傳入 true 否則 傳入 false
mui('.lt_view').pullRefresh().endPullupToRefresh();

// 重置 元件
mui('.lt_view').pullRefresh().refresh(true);