npm install --save mescroll.js //不要使用cnpm安装
//引入刷新列表组件
import MescrollVue from ‘mescroll.js/mescroll.vue’
<mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
需要刷新的列表
mescroll-vue>
mescroll: null,
mescrollUp: {
callback: this.loadMoreDataCallback,
page: {
num: 0, //当前页,默认从0开始,在开始回调之前会加1; 即callback(page)会从1开始
size: 10 //每页数据条数,默认10
},
htmlNodata: '没有更多数据了
',
noMoreSize: 2, //如果列表已无数据,可设置列表总数大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
},
// 必须设置
mescrollInit(mescroll) {
this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
},
beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
next(vm => {
vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
})
},
beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
next()
},
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
loadMoreDataCallback(page, mescroll) {
// 获取访客列表
// 记得写page.num , page.size 页码
AdminProductManagerRequestManager.getVisitorData('', this.search, AdminProductManagerRequestManager.getSortEvent(this.SortData), this.aim, page.num, page.size, (data, status, info) => {
if (data.length > 0) {
console.log(this.clientData);
// 下面写死的
if (page.num == 1) this.clientData = [];
// 刷新数据
this.clientData = this.clientData.concat(data);
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(data.length);
});
} else {
// 没有数据后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(0);
});
}
});
},
-------------------------如果需要调用重新获取数据就用这个--------------------------------------
// 刷新数据
this.mescroll.resetUpScroll()
-webkit-overflow-scrolling:touch;
.mescroll {
padding-top: 105px;
position: fixed;
padding-bottom: 1rem;
top: 2px;
bottom: 0;
height: auto;
}