ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

移动端MescrollVue上下刷新

2021-04-12 11:32:52  阅读:198  来源: 互联网

标签:cnt res 刷新 MescrollVue mescroll 上下 eventData data page


<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%;
}

 

标签:cnt,res,刷新,MescrollVue,mescroll,上下,eventData,data,page
来源: https://www.cnblogs.com/luckyShuang/p/14647158.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有