<mescroll-body ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback"
@up="upCallback" :safearea="true" style="background-color:#f2f1f6;">
<view>代码块</view>
</mescroll-body>
上面是html
data
data() {
return {
keywords:'',
data_list:[],
mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
downOption: {
auto: false
},
// 上拉加载的配置(可选, 绝大部分情况无需配置)
upOption: {
use: true, //是否启用上拉加载
auto: false, //是否在初始化完毕之后自动执行一次上拉加载的回调
page: {
num:0,
size: 10 // 每页数据的数量,默认10
},
noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
textNoMore: '', //底部无数据的提示,默认是 -- END --'
toTop: { //会到顶部的按钮设置
src: '', //图片路径,配置为空,为隐藏
width: 72, //回到顶部图标的宽度 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx. 1.2.0新增)
radius: "50%" //radius: 圆角 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx. 1.2.0新增)
},
empty: { //无数据的占位图
use: true,
icon: '/static/nodata.png',
tip: '暂无数据',
btnText: '',
fixed: true,
top: "190rpx",
zIndex: 99,
}
},
}
},
methods部分:
searchClick(){
this.downCallback()
},
/*mescroll组件初始化的回调,可获取到mescroll对象*/
mescrollInit(mescroll) {
var that = this;
that.mescroll = mescroll;
},
/*下拉刷新的回调*/
downCallback() {
var that = this;
console.log('下拉刷新');
console.log(that.mescroll);
that.mescroll.resetUpScroll();
},
/*上拉加载的回调*/
upCallback(page) {
var that = this;
console.log('上拉加载');
let params,url
params = {
page: that.mescroll.num,
contract_status:that.status,
}
url='/base/api.member_order/contract_list'
uni.$http.post(url, params).then((r) => {
console.log('r-list',r);
let data = r.data;
console.log(data);
if (data.code != 1) {
that.mescroll.endErr();
uni.showToast({
title: data.info,
icon: 'none'
})
return
}
//mescroll.endSuccess(dataSize, hasNext, systime) 隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用
// dataSize : 当前页获取的数据量(注意是当前页)
// hasNext : 是否有下一页数据true/false
// systime : 加载第一页数据的服务器时间 (可空);
// that.mescroll.endSuccess(data.data.length);
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
that.mescroll.endByPage(data.data.length, data.total);
if (that.mescroll.num == 1) {
that.data_list = [];
}
//a.concat(b) 数组a中追加数组b的元素
that.data_list = that.data_list.concat(data.data);
if (that.mescroll.num == 1) {
//(y,t) y=0,则回到列表顶部; 如需滚动到列表底部,可设置y很大的值,比如y=99999,t时长,默认300ms,为0时不需要动画
that.mescroll.scrollTo(0, 0);
}
}).catch((err) => {
// uni.hideLoading();
that.mescroll.endErr();
});
},