1.初始化mescroll的时候,包括以后
2.mescroll最基本的配置
tempale:
<mescroll-uni ref="mescrollRef"
@init="mescrollInit" 这个不用设置
@down="downCallback"
@up="upCallback"
:down="downOption"
:up="upOption"
:fixed="false"
:height="listHeight + '%'"> 动态设置高
<view class="main-list-item" v-for="(item,index) in list"
:key="index">
{{index}}
</view>
</mescroll-uni>
js:data()
return {
list:0,
show:true,
downOption: {
use: true, // 是否启用下拉刷新; 默认true
auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
textLoading: '加载中 ...' // 加载中的提示文本
},
upOption: {
use: true, // 是否启用上拉加载; 默认true
auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
page: {
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
size: 10, // 每页数据的数量
time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
},
noMoreSize: 10, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
offset: 80, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
textLoading: '加载中 ...', // 加载中的提示文本
textNoMore: '-- END --', // 没有更多数据的提示文本
},
listHeight:0
}
js:methods:
/*下拉刷新的回调 */
downCallback() {
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
setTimeout(()=>{
this.list = [];
this.mescroll.resetUpScroll()
},1000)
console.log("downCallback");
},
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
upCallback(page) {
//联网加载数据
try{
setTimeout(()=>{
if(page.num > 1){
this.list = this.list + 10;
}
this.mescroll.endByPage(10, 3); //必传参数(当前页的数据个数, 总页数)
},1000)
//设置列表数据
if(page.num == 1) {
this.list = 10; //如果是第一页需手动 初始化数据
}
console.log("upCallback",page.num);
}catch{
this.mescroll.endErr();
}
},
js:onLoad()
this.show = false;
this.$nextTick(() => {
this.show = true;
})