vue?使用mescroll.js框架實現(xiàn)下拉加載和上拉刷新功能
以下是代碼是在項目中抽取出來的,都是實現(xiàn)下拉刷新上拉加載的要點。
注:以下不是用vue-cli寫的,用vue-cli的請繞過,抱歉~
1、mescroll 的頁面的初始化
initMescroll(){ var _this = this; this.mescroll = new MeScroll("mescroll",{ down:{ callback: _this.downCallback //下拉刷新的回調(diào)函數(shù) }, up:{ callback: _this.upCallback, //上拉加載的回調(diào)函數(shù) auto:false, //是否在初始化完畢之后自動執(zhí)行一次上拉加載的回調(diào) noMoreSize:5,//無數(shù)據(jù)時,可設(shè)置列表的總數(shù)量要大于5條才顯示無更多數(shù)據(jù) htmlNodata:'<p class="upwarp-nodata">-- 沒有更多數(shù)據(jù)了 --</p>', toTop:{ //頁面滾動到一定距離時,顯示回到頂部的圖標 warpId : null, src : "img/totop.svg", html: null, offset : 1000, warpClass : "mescroll-totop", showClass : "mescroll-fade-in", hideClass : "mescroll-fade-out", duration : 300, supportTap : false, btnClick : null }, empty:{ // 數(shù)據(jù)為空時,顯示無數(shù)據(jù)的圖片和提示 warpId : "scroll-box", icon : "img/nodata.svg", tip : "暫無相關(guān)數(shù)據(jù)~" } } }) }
2、下拉刷新回調(diào)
downCallback(){ this.curPageNum =0; //默認為0, this.pageSize = 10; this.dataList = []; this.mescroll.resetUpScroll(true); //重置列表為第一頁curPageNum會變成1 ,實現(xiàn)下拉刷新 }
3、上拉加載回調(diào)
upCallback(){ this.curPageNum += 1; this.pageSize = 10; this.getDataList(); //上拉加載數(shù)據(jù)請求函數(shù) }
4、數(shù)據(jù)請求的函數(shù)
getDataList(){ var _this = this; var url = "api接口地址"; axios.get(url) .then(function(res){ _this.dataList = _this.dataList.concat(res.data.dataList); var totalPage = res.data.totalPage; var totalSize = res.data.totalSize; var hasNext = res.data.hasNext; _this.mescroll.endSuccess(res.data.pageSize,hasNext); }) .catch(function(err){ _this.mescroll.endErr(); }) }
5、關(guān)鍵字搜索,頁面刷新 (同切換菜單頁面刷新效果)
searchCommit(){ this.curPageNum = 0; this.dataList = []; this.mescroll.resetUpScroll() }
mescroll.js框架官網(wǎng)地址:http://www.mescroll.com/index.html
到此這篇關(guān)于vue 使用mescroll.js框架 實現(xiàn)下拉加載和上拉刷新功能的文章就介紹到這了,更多相關(guān)vue下拉加載和上拉刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3的watch用法以及和vue2中watch的區(qū)別
這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vue+ElementUI table實現(xiàn)表格分頁
這篇文章主要為大家詳細介紹了Vue+ElementUI table實現(xiàn)表格分頁,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-12-12在Vue3項目中使用VueCropper裁剪組件實現(xiàn)裁剪及預覽效果
這篇文章主要介紹了在Vue3項目中使用VueCropper裁剪組件(裁剪及預覽效果),本文分步驟結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07