微信小程序中的上拉加载

最近小程序项目中频繁用到了上拉加载和下拉刷新这两个功能，所以在这里说一下过程和用法，也当留一个笔记

上拉加载：其实说白了就是分页。因为在数据量庞大的情况下我们不可能将所有的数据都请求回来并渲染上，

这样不仅影响加载速度，用户体验也相当差。

用户上滑触底时触发，借助小程序的生命周期onReachBottom()，监听用户上拉触底事件

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom

这是小程序的官方文档，在这个函数中定义用户上拉之后的一系列动作

//前置准备，页面刷新时请求的数据

init(){

let _that = this

http.request({

url: \'...\',

method: \'post\',

data: {

"pageNum": this.data.page, // 一次请求页数，可以和后台协商参数，

"pageSize": 5, // 一次请求的数据个数，可以和后台协商参数，

},

success: (res) => {

let oldData = _that.data.list;

_that.setData({

list: oldData.concat(res.data.list),

//list在data中设置初始值为[]，page也设置初始值为1，

//concat方法，将每次请求回来的res.data.list合并在一起

})

}

})

}

onReachBottom: function () {

在这之前要说一下前置准备，通常页面上来刚刷新的时候，根据需求会定义加载数据的数量，

也就是我们从接口请求的时候向后台传的参数之一，一定要借助页面上来加载时的接口，在那里下功夫

然后用户上拉的时候我们只需要将需要请求的页数+1。然后再请求一次页面加载时候的接口就ok了

this.setData({

page: this.data.page + 1

})

this.init()

}

至此，上拉刷新完成，如果需要其他操作，再配合判断选择是否触发;

蟹蟹 ~