起步
地址一：mescroll官方文檔
地址二：uni-app插件市場
地址三：GitHub下載源碼
地址四：下載好的源碼 取件碼：z97x
用法
1. 可以在GitHub下載源碼，或用下載好的，也可以通過 npm install --save mescroll-uni，去下載。
2. 下載好的項目就是下圖這樣。
3. 我們將uni_modules目錄下的mescroll-uni直接復(fù)制到自己項目中，列如：
4. 將把剛才復(fù)制進來的mescroll-uni掛在到全局，也就是main.js
/**
* @note Register for global drop-down refresh and pull up to load components 注冊全局下拉刷新，上拉加載組件
* */
import MescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue"
import MescrollUni from "@/components/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
Vue.component('mescroll-body', MescrollBody)
Vue.component('mescroll-uni', MescrollUni)
5. 然后在我們要用到的頁面中直接調(diào)用組件并且要引入組件中mescroll-mixins.js
<template>
<mescroll-body ref="mescrollRef" @init="mescrollInit" :fixed="true" :isLock="true" @down="downCallback" @up="upCallback" :up="upOption">
// 寫我們要渲染的內(nèi)容
</mescroll-body>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data () {
return {
}
},
methods: {
/*下拉刷新的回調(diào) */
downCallback(){
//延時為了看效果
setTimeout(() => {
this.mescroll.resetUpScroll()
}, 800)
},
/*上拉加載的回調(diào): 其中page.num:當(dāng)前頁 從1開始, page.size:每頁數(shù)據(jù)條數(shù),默認(rèn)10 */
async upCallback(page){
let data = {
// 要傳的參數(shù)
page: page.num
}
const { code,entity,message } = await // 后面跟的就是你們封裝好的api，列如：this.http.post/get('api',{data})
if(code == 200){
//聯(lián)網(wǎng)成功的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài);
this.mescroll.endSuccess(entity.list.length);// 括號里面寫的是總個數(shù)
//設(shè)置列表數(shù)據(jù)
if(page.num == 1) this.resultData = []; //如果是第一頁需手動制空列表
//追加新數(shù)據(jù)
this.resultData = this.resultData.concat(entity.list); // 所有的數(shù)據(jù)
} else {
// 這里面寫請求失敗的方法
console.log('請求失敗')
}
}
}
}
</script>
6. 如果要在點擊之后請求接口數(shù)據(jù)，那么不要直接this.upCallback()，這樣的話你的頁數(shù)是錯誤的。
// 我們可以用組件提供好的。
this.mescroll.resetUpScroll()
// 這樣我們每次點擊請求的時候他的頁數(shù)都會變?yōu)?
