微信小程序实现上拉加载(分页加载)
- 本文将简单介绍微信小程序如何实现上拉加载(分页加载)
- 将要使用的api:
- wx.request(Object object)
主要思想是:当用户滑倒页面底部,或是距离页面底部x时(x的自定义),触发页面的触底监听函数,然后调用开发者设计的触底函数,进行相关请求。其中,请求第二页的数据时,会对返回的数组与原有的数组合并,并把新数组发送到data中,渲染到页面。
本文将按此后端接口进行介绍,接口如图:
小程序端js代码如下:
data: {
//消息列表数据
noticeList: [],
//页码
pageNum:1,
},
//触底响应函数
onBottom(){
var that = this;
(this.data.pageNum)++;
this.getNoticeList();
},
getListSuccess(res){
//成功回调函数,具体需要根据业务需求设计分支结构,此处省略
if (this.data.pageNum == 1) {
this.setData({
noticeList: res.data.data.list,
})
} else {
//获取原始列表
let noticeList = that.data.noticeList;
//获取新列表
let arr = res.data.list;
//新列表数据与原列表数据合并
let newArr = noticeList.concat(arr);
this.setData({
noticeList: newArr,
})
}
},
//获取列表失败的回调函数
getListFail(err){
wx.showToast({
title: '获取失败,请稍后重试',
icon:'none',
duration:2500,
})
},
getNoticeList(){
//请求的接口地址
let url = '/notice/getList';
//当前的页码
let pageNo = this.data.pageNum;
//某些业务数据,如
let id = this.data.id;
//一页包含几条数据
let pageSize = 20;
let data = {
id: id,
pageNo: pageNo,
pageSize: pageSize,
}
//调用了一个自己封装了的wx.request函数,无需关注,其参数和wx.request的差不多对应
//url是请求地址,'post'是请求头,data是请求参数
//this.getListSuccess和this.getListFail分别是成功和失败的回调函数
$.ajax(url, 'POST', data, this.getListSuccess, this.getListFail);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.onBottom();
},
除此之外,我们还可以在相关页面的json代码中设置:
"onReachBottomDistance":100
描述:页面上拉触底事件触发时距页面底部距离,单位为px。
欢迎大家多多指教,一起交流~