官网：www.mescroll.com/api.html 设置公共的组件
<template>
<div>
<!-- @init="mescrollInit" -->
<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" @upCallback='refreshStart' @downCallback='handleLoadStart'>
<!--内容...-->
<slot></slot>
</mescroll-vue>
</div>
</template>
// 引入mescroll的vue组件
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
props: {
// 下拉刷新
downCallback:{
default:()=>{}
},
// 上拉加载
upCallback :{
default:()=>{}
}
},
components:{MescrollVue},
data() {
return {
mescroll: null, // mescroll实例对象
mescrollDown:{
auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
callback: this.downCallback,
}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
mescrollUp: { // 上拉加载的配置.
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
//以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10 //每页数据条数,默认10
},
htmlNodata: '<p class="upwarp-nodata"></p>',
noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
// 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
// 这就是为什么无更多数据有时候不显示的原因
toTop: {
//回到顶部按钮
src: "@/assets/goTop.png", //图片路径,默认null,支持网络图
offset: 1000 //列表滚动1000px才显示回到顶部按钮
},
empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
tip: "暂无相关数据~" //提示
}
},
};
},
methods: {
// 上拉加载开始
handleLoadStart() {
this.downCallback()
},
//下拉刷新
refreshStart(){
this.upCallback()
},
mescrollInit (mescroll) {
this.mescroll = mescroll
},
}
};
</script>
<style lang="less" scoped>
/*通过fixed固定mescroll的高度*/
.mescroll {
position: fixed;
top: 44px;
bottom: 0;
height: auto;
}
.mescroll-totop{
bottom: 80px;
}
.topscroll .mescroll{
top: 90px;
}
</style>
在需要分页的页面引入组件
<comscroll :upCallback="upCallback" :downCallback='downCallback'>
//内容
</comscroll>
//下拉加载
upCallback(page,mescroll){
//接口所需要传递的参数
let params = {
customerId:this.customerId,
userId:this.getUserId,
page_index:page.num,
page_size:page.size
}
//接口函数
this.dataListFun(params,mescroll,0,page)
},
//接口公共函数
dataListFun(params,mescroll,isup,page){
//接口
this.$http.get("/wechat/list", {
params: params
}).then(res => {
if (res.body.success) {
let resInfo = res.body.data.list
//判断是下拉加载还是上拉刷新
if(isup == 0){
if(page.num == 1) this.listflex = []
this.listflex = this.listflex.concat(resInfo)
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(resInfo.length)
})
}else{
this.listflex = resInfo
this.$nextTick(() => {
mescroll.resetUpScroll()// 结束下拉刷新,无参
})
}
} else {
},
res => {
}
)
.catch(res => {
});
},
