一、官網
二、下載引入
<script src="./js/mescroll.min.js"></script>
<link rel="stylesheet" href="./css/mescroll.min.css">
三、拷貝佈局結構
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能刪
<div> //這個div不能刪,否則上拉加載的佈局會錯位.(可以改成ul或者其他容器標籤)
//內容...
</div>
</div>
四、固定mescroll的div高度. 推薦通過定位的方式
.mescroll{
position: fixed;
top: 44px;
bottom: 0;
height: auto; /*如設置bottom:50px,則需height:auto才能生效*/
}
五、創建mescroll對象
// 下拉刷新
refresh(){
const vm = this;
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='佔位圖''/>
// }
// }
});
//下拉刷新的回調
function downCallback() {
if(!vm.firstRefresh){
vm.getDetail();
}
if(vm.firstRefresh){
vm.firstRefresh = false;
}
// console.log("inininindownCallbackdownCallback");
// vm.couponList()
setTimeout(()=>{
mescroll.endSuccess();
},1000)
// $.ajax({
// url: 'xxxxxx',
// success: function(data) {
// //聯網成功的回調,隱藏下拉刷新的狀態;
// mescroll.endSuccess(); //無參. 注意結束下拉刷新是無參的
// //設置數據
// //setXxxx(data);//自行實現 TODO
// },
// error: function(data) {
// //聯網失敗的回調,隱藏下拉刷新的狀態
// mescroll.endErr();
// }
// });
}
},
該插件功能豐富，因本需求只用下拉加載，故只寫了下拉加載，其可實現上拉，下拉加載，並帶有動畫。