下拉刷新 上拉加载封装

/**

• @module scroll
• @author: huoyou
• @description: 引入mescroll的vue组件
  */
  import MescrollVue from ‘mescroll.js/mescroll.vue’

export default {
components: {
MescrollVue
},
data () {
return {
mescroll: null, // mescroll实例对象
mescrollDown: {
auto: false,
callback: this.downCallback,
isLock: false, // 是否锁定下拉刷新
offset: 40, // 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
textInOffset: ‘下拉刷新’, // 下拉的距离在offset范围内的提示文本
textOutOffset: ‘释放更新’, // 下拉的距离大于offset范围的提示文本
textLoading: ‘加载中 …’ // 加载中的提示文本
}, // 下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
mescrollUp: {
// 上拉加载的配置.
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
// 以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, // 当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10 // 每页数据条数,默认10
},
htmlNodata: ‘

– 暂无更多数据了 –

’,
noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看,这就是为什么无更多数据有时候不显示的原因
toTop: {
// 回到顶部按钮
src: ‘./static/totop.png’, // 图片路径,默认null,支持网络图
offset: 700, // 列表滚动1000px才显示回到顶部按钮
warpClass: ‘mescroll-totop’,
showClass: ‘mescroll-fade-in’,
hideClass: ‘mescroll-fade-out’
},
empty: {
// 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
warpId: ‘scrollBox’, // 父布局的id (1.3.5版本支持传入dom元素)
icon: ‘./static/noMessage.png’,
tip: ‘暂无数据’ // 提示
},
lazyLoad: {
use: true, // 默认false,不开启
attr: ‘imgurl’,
showClass: ‘mescroll-lazy-in’,
delay: 500,
offset: 200
}
},
loading: true,
mescrollType: 1,
dataList: [], // 列表数据
totalCount: 0, // 统计总数
dataKey: ‘res.data.content’, // 获取列表数组
totalKey: ‘res.data.totalElements’ // 获取统计总数
}
},
beforeRouteEnter (to, from, next) {
// 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
next((vm) => {
// 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
vm. KaTeX parse error: Expected 'EOF', got '&' at position 15: refs.mescroll &̲& vm.refs.mescroll.beforeRouteEnter()
})
},
beforeRouteLeave (to, from, next) {
// 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
// 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
this. KaTeX parse error: Expected 'EOF', got '&' at position 15: refs.mescroll &̲& this.refs.mescroll.beforeRouteLeave()
next()
},
methods: {
/* 下拉刷新的回调 */
downCallback (mescroll) {
mescroll.resetUpScroll() // 触发下拉刷新的回调,加载第一页的数据
},
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit (mescroll) {
this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
},
upCallback (page, mescroll) {
if (typeof this.fetchData === ‘function’) {
this.fetchData(page)
.then(res => {
this.loading = false
if (res.data) {
// 请求的列表数据
// eslint-disable-next-line no-eval
var arr = eval(this.dataKey) || []
// 如果是第一页需手动置空列表
if (page.num === 1) this.dataList = []
this.dataList = this.dataList.concat(arr)
// eslint-disable-next-line no-eval
this.totalCount = eval(this.totalKey) || 0
if (typeof this.fetchDataCallback === ‘function’) {
this.fetchDataCallback(res)
}
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(arr.length)
})
} else {
mescroll.endErr()
}
})
.catch(() => {
this.loading = false
mescroll.endErr()
})
}
}
}
}