起步
地址一：mescroll官方文档
地址二：uni-app插件市场
地址三：GitHub下载源码
地址四：下载好的源码 取件码：z97x
用法
1. 可以在GitHub下载源码，或用下载好的，也可以通过 npm install --save mescroll-uni，去下载。
2. 下载好的项目就是下图这样。
3. 我们将uni_modules目录下的mescroll-uni直接复制到自己项目中，列如：
4. 将把刚才复制进来的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. 然后在我们要用到的页面中直接调用组件并且要引入组件中mescroll-mixins.js
<template>
<mescroll-body ref="mescrollRef" @init="mescrollInit" :fixed="true" :isLock="true" @down="downCallback" @up="upCallback" :up="upOption">
// 写我们要渲染的内容
</mescroll-body>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data () {
return {
}
},
methods: {
/*下拉刷新的回调 */
downCallback(){
//延时为了看效果
setTimeout(() => {
this.mescroll.resetUpScroll()
}, 800)
},
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
async upCallback(page){
let data = {
// 要传的参数
page: page.num
}
const { code,entity,message } = await // 后面跟的就是你们封装好的api，列如：this.http.post/get('api',{data})
if(code == 200){
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
this.mescroll.endSuccess(entity.list.length);// 括号里面写的是总个数
//设置列表数据
if(page.num == 1) this.resultData = []; //如果是第一页需手动制空列表
//追加新数据
this.resultData = this.resultData.concat(entity.list); // 所有的数据
} else {
// 这里面写请求失败的方法
console.log('请求失败')
}
}
}
}
</script>
6. 如果要在点击之后请求接口数据，那么不要直接this.upCallback()，这样的话你的页数是错误的。
// 我们可以用组件提供好的。
this.mescroll.resetUpScroll()
// 这样我们每次点击请求的时候他的页数都会变为0
