先贴一个官网的地址 http://www.mescroll.com/ （一般情况下的简单列表拖拉拽基础的demo案例都可以实现）
1.需求：在一个界面有多个组件组成比如列表+轮播图+其它....
这时候就需要直接把官方的 mescroll-vue组件直接引入 代码如下
<template>
<div class="pullRefersh">
<!--mescroll滚动区域的基本结构-->
<div>
<mescroll-vue
ref="mescroll"
:down="mescrollDown"
:up="mescrollUp"
@init="mescrollInit">
<!--内容...-->
<slot></slot>
</mescroll-vue>
</div>
</div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue'
export default{
name:'pullRefersh',
components:{
MescrollVue
},
data(){
return{
mescroll: null, // mescroll实例对象
mescrollDown:{
use:true,
callback: this.downCallback,
}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了 callback: function(mescroll) { })
mescrollUp: { // 上拉加载的配置.
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
//以下是一些常用的配置,当然不写也可以的.
page: {
num: 1, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 6 //每页数据条数,默认10
},
isBounce:false,
htmlNodata: '<p class="upwarp-nodata">我也是有底线的哦~</p>',
noMoreSize: 5,
/**如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
这就是为什么无更多数据有时候不显示的原因*/
toTop: {
//回到顶部按钮
src: "./static/imgs/mescroll/totop.png", //图片路径,默认null,支持网络图
offset: 1000, //列表滚动1000px才显示回到顶部按钮
},
empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
icon: "./static/imgs/mescroll/mescroll-empty.png",
tip: "暂无相关数据~" //提示
},
loadFull:{
use : true ,
delay : 100
}
},
dataList: [], // 列表数据
}
},
methods: {
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit (mescroll) {
this.mescroll = mescroll;
// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
},
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback (page, mescroll) {
this.mescrollUp.htmlNodata='<p class="upwarp-nodata">我也是有底线的哦~</p>';
// 联网请求
this.sourceObj.parameter.pageNum=page.num;
this.sourceObj.parameter.pageSize=page.size;
进行数据请求方法(response=>{
// 请求的列表数据
let arr = response.data.data;
// 如果是第一页需手动制空列表
if (page.num === 1) {
this.dataList = [];
}
// 把请求到的数据添加到列表
this.dataList = this.dataList.concat(arr);
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(arr.length)
})
})
},
downCallback(mescroll) {
// 联网请求
this.curObj.data=[];
this.sourceObj.parameter.pageNum=1;
this.sourceObj.parameter.pageSize=6;
进行数据请求方法(response=>{
if(response==''){
// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr()
return;
}
// 把请求到的数据添加到列表
this.dataList=response.data.data;
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(response.data.data.length)
})
},this)
}
}
}
</script>
2.将改组件封装为一个公共组件 避免方法重写 代码冗余
此处具体操作可见地址 https://mp.csdn.net/postedit/84589917
3.上述自定义组件名为pullRefersh 将该组件作为最大的容器将所有组件容纳即可
eg：
<template>
<pullRefersh>
<carousel></carousel>
....
....
</pullRefersh>
</template>
4.在必须插入样式代码 否则在手机上会出现各种bug（官方说下面的样式是为了确定滚动的容器的高度）
.pullRefersh .mescroll{
position: fixed;
top:0;
bottom: 0;
height: auto;
}5.以上能实现的效果就是如下图所示了（虽然我想要一个页面多个模块数据都能加载更多 但是显然是不可能实现的）
