//npm
npm install --save mescroll.js
//main.js引入
//MescrollVue; //上拉加载,下拉刷新
import MescrollVue from 'mescroll.js/mescroll.vue'
Vue.component('mescroll-vue', MescrollVue);
//在页面中使用
<template>
<div class="vote_record">
<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" >
<ul v-if="dataShow">
<li v-for="(item,index) in list" :key="index" :class="{red:item.status == 0}">
{{item}}
</li>
</ul>
//暂无数据
<no-data type="1" v-if="!dataShow"></no-data>
//报错提示
<no-data type="2" v-if="dataErr"></no-data>
</mescroll-vue>
</div>
</template>
data(){
return{
dataShow:true,//默认有数据
dataErr:false,//加载错误
mescroll: null,
mescrollDown: { auto: false, },
mescrollUp: { callback: this.upCallback, },
list:[],
}
},
methods:{
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
upCallback(page, mescroll) {
this.axios.post('/api',{
page: page.num,
}).then(res=>{
if(res.status == 1){
let arr = res.data.list;// 请求的列表数据
if (page.num === 1) this.list = [];// 如果是第一页需手动置空列表
this.list = this.list.concat(arr);// 把请求到的数据添加到列表
this.$nextTick(() => {
mescroll.endSuccess(arr.length)// 数据渲染成功后,隐藏下拉刷新的状态
})
if(this.list.length == 0){
this.dataShow = false;//暂无数据
}else{
this.dataShow = true;//有数据
}
}
}).catch((e) => {
mescroll.endErr();
this.dataErr = true;//报错显示加载错误,请刷新
});
},
},
// 要想回复到初始位置,路由必须配合使用keep-alive
// 进入路由时,恢复列表状态
beforeRouteEnter(to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
next(vm => {
// 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
})
},
// 离开路由时,记录列表状态
beforeRouteLeave(to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
// 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
next()
},
<style>
.mescroll{
position: fixed;
top:0;
bottom: 0;
height: auto;
}
</style>
mescroll常用方法:(参考官网:http://www.mescroll.com)
1、mescroll.triggerDownScroll(); 主动触发下拉刷新
2、mescroll.triggerUpScroll(); 主动触发上拉加载
3、mescroll.scrollTo( y, t ); 滚动列表到指定位置
y=0,则回到列表顶部; 如需滚动到列表底部,可设置y很大的值,比如y=99999
t时长,单位ms,默认300; 如果不需要动画缓冲效果,则传0 (需更新至1.2.3版本)
4、mescroll.endByPage(dataSize, totalPage, systime); (v 1.2.1 新增)
隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用
dataSize : 当前页获取的数据总数(注意是当前页)
totalPage : 列表的总页数
systime : 加载第一页数据的服务器时间 (可空);
5、mescroll.endBySize(dataSize, totalSize, systime); (v 1.2.1 新增)
隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用
dataSize : 当前页获取的数据总数(注意是当前页)
totalSize : 列表的总数据量
systime : 加载第一页数据的服务器时间 (可空);
6、mescroll.endSuccess(dataSize, hasNext, systime); (v 1.2.1 调整)
隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用
dataSize : 当前页获取的数据量(注意是当前页)
hasNext : 是否有下一页数据true/false
systime : 加载第一页数据的服务器时间 (可空);
7、mescroll.endErr();
隐藏下拉刷新和上拉加载的状态, 在联网获取数据失败后调用;
mescroll内部会自动恢复原来的页码,时间等变量;
8、mescroll.resetUpScroll( isShowLoading );
重置列表为第一页 (常用于列表筛选条件变化或切换菜单时重新刷新列表数据)
内部实现: 把page.num=1,再主动触发up.callback
isShowLoading 是否显示进度布局;
1.默认null,不传参,则显示上拉加载的进度布局
2.传参true, 则显示下拉刷新的进度布局
3.传参false,则不显示上拉和下拉的进度 (常用于静默更新列表数据)