MUI上拉重新整理下拉載入
阿新 • • 發佈:2018-11-27
使用之前引入檔案
<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);