php网页上拉加载数据,微信小程序 onReachBottom 上拉加载

1、首先在data里定义一下返回数据data,和翻页的页数pagenum

data: {

datalist: [], //.wxml文件需要绑定的列表，我这里用的数据类型是数组

pagenum: 1, //初始页默认值为1

},

2、具体的请求过程，包含新老数据的数组合并，实现数据实时更新

getdatalist: function () { //可在onLoad中设置为进入页面默认加载

var that = this;

wx.request({

url: '请求地址',

data: {

"key": "某入参value",

"pageNum": that.data.pagenum, //从数据里获取当前页数

"pageSize": 10, //每页显示条数

},

method: "POST",

success: function (res) {

var arr1 = that.data.datalist; //从data获取当前datalist数组

var arr2 = res.data; //从此次请求返回的数据中获取新数组

arr1 = arr1.concat(arr2); //合并数组

that.setData({

datalist: arr1 //合并后更新datalist

})

},

fail: function (err) { },//请求失败

complete: function () { }//请求完成后执行的函数

})

}

3、翻页时更新页码pagenum+1，并触发新一轮请求，和第2部形成循环。

onReachBottom: function () { //触底开始下一页

wx.showToast({

title: '加载中...',

icon: 'loading',

duration: 1000

})

var that=this;

var pagenum = that.data.pagenum + 1; //获取当前页数并+1

that.setData({

pagenum: pagenum, //更新当前页数

})

that.getdatalist();//重新调用请求获取下一页数据

},

4、json 页面设置

{

"onReachBottomDistance": 50

}

5、php后端代码

$pageNum = max(1, $this->request->request('pageNum'));

$pageSize = $this->request->request('pageSize');

$pageindex=($pageNum-1) * $pageSize;

$list = Db::name('wxappproduct')->where('status', '=',1)->order('weigh desc,id')->limit($pageindex,$pageSize)->select();

if ($list) {

$this->success('返回成功', ['list' => $list]);

}else{

$this->error(__('no exists'));

}