1. 下載並引用 mescroll.min.css , mescroll.min.js
<link rel="stylesheet" href="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.css"> <script src="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script> 2. 拷貝以下布局結構 :
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能刪 <div> //這個div不能刪,否則上拉加載的布局會錯位.(可以改成ul或者其他容器標簽) //內容... </div> </div> 3. 創建mescroll對象 :
var mescroll = new MeScroll("mescroll", { //第一個參數"mescroll"對應上面布局結構div的id (1.3.5版本支持傳入dom對象) //如果您的下拉刷新是重置列表數據,那么down完全可以不用配置,具體用法參考第一個基礎案例 //解析: down.callback默認調用mescroll.resetUpScroll(),而resetUpScroll會將page.num=1,再觸發up.callback down: { callback: downCallback //下拉刷新的回調,別寫成downCallback(),多了括號就自動執行方法了 }, //主要使用 up: { callback: upCallback, //上拉加載的回調 //以下是一些常用的配置,當然不寫也可以的. page: { num: 0, //當前頁 默認0,回調之前會加1; 即callback(page)會從1開始 size: 10 //每頁數據條數,默認10 }, htmlNodata: '<p class="upwarp-nodata">-- END --</p>', noMoreSize: 5, //如果列表已無數據,可設置列表的總數量要大於5才顯示無更多數據; 避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看 這就是為什么無更多數據有時候不顯示的原因. toTop: { //回到頂部按鈕 src: "../img/mescroll-totop.png", //圖片路徑,默認null,支持網絡圖 offset: 1000 //列表滾動1000px才顯示回到頂部按鈕 }, empty: { //列表第一頁無任何數據時,顯示的空提示布局; 需配置warpId才顯示 warpId: "xxid", //父布局的id (1.3.5版本支持傳入dom元素) icon: "../img/mescroll-empty.png", //圖標,默認null,支持網絡圖 tip: "暫無相關數據~" //提示 }, lazyLoad: { use: true // 是否開啟懶加載,默認false attr: 'imgurl' // 標簽中網絡圖的屬性名 : <img imgurl='網絡圖 src='占位圖''/> } } }); 4. 結束回調 :
mescroll.endSuccess();