移动端MescrollVue上下刷新
<template>
<div>
<mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
<div class="events-content">
事件内容
</div>
</mescroll-vue>
</div>
</template>
data () {
return {
mescroll: null, // mescroll实例对象
mescrollUp: { // 上拉加载的配置.
callback: this.upCallback,
isBoth: true,
dataList: [] // 列表数据
},
cnt: 10,
page: 1,
eventData: []
}
},
methods:
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit (mescroll) {
this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
},
upCallback (page, mescroll) {
// page = {num:1, size:10}
// console.log(111, page)
let vm = this
this.page = page.num
this.$http.post(this.base + 'queryevent?token=' + this.$store.getters.get_token,
{dids: [], cnt: parseInt(this.cnt), page: parseInt(this.page)}).then(res => {
console.log('事件', res)
if (res.data.code === 200) {
// if (res.data.data.length === 0) {
// return
// }
if (this.page === 1) {
this.eventData = res.data.data
} else {
this.eventData = this.eventData.concat(res.data.data)
}
}
this.$nextTick(() => {
setTimeout(() => {
vm.mescroll.endSuccess(this.eventData.length)
}, 100)
})
}).catch(err => {
console.log(err)
this.mescroll.endErr()
})
}
<style scoped>
.mescroll {
position: fixed;
top: 22px;
bottom: 140px;
/*font-size: 30px;*/
height: auto;
}
.events-content{
height: 100%;
width: 100%;
}