下拉刷新、上拉加载更多（微信小程序）
需求分析
微信小程序开发，经常需要下拉刷新、上拉加载更多进行网络请求。主要的需求如下：
（1）页面初始化时，自动下拉刷新，下拉操作时，激发下拉刷新，下拉刷新的同时，更新、显示数据。
（2）当滑动到底部上拉时，加载更多数据，如果没有更多的数据，则提示“没有更多啦”。
（3）交互反馈，给用户一个良好的体验。
实现逻辑
（1）用户下拉操作时，会激发onPullDownRefresh 函数。在onPullDownRefresh 函数中发起网络请求，可以实现下拉刷新，更新、显示数据。在生命周期函数onLoad中， 调用onPullDownRefresh 函数，实现页面初始化时，自动下拉刷新。
（2）当滑动到底部上拉时，会激发onReachBottom函数。在onReachBottom函数中发起网络请求，拼接地址，实现第1次上拉加载第2页；第n次上拉，加载第(n + 1)页。如果没有更多的数据，则提示“没有更多啦”。
（3）交互反馈：网络请求之前，使用消息提示框提示“刷新数据”、或“加载更多”，请求之后隐藏提示。下拉刷新请求之后，结束下拉刷新。
另外，在onPullDownRefresh 函数中，将页面数据（dataList）设置为第一页数据，将页面变量（page）设置为初始值。如果用户上拉加载更多后，又下拉刷新，那么清除原来的数据，只显示新的第一页的数据，当用户再次滑动上拉时，再加载更多。
数据接口
第一页的数据接口：
http://app.api.autohome.com.cn/autov5.0.0/news/newslist-pm1-c0-nt1-p1-s30-l0.json
第n页的数据接口（lasttime是已下载数据最后一条的lasttime）：
http://app.api.autohome.com.cn/autov5.0.0/news/newslist-pm1-c0-nt1-pn-s30-llasttime.json
项目源码
1、JSON文件，在window选项中开启enablePullDownRefresh
"enablePullDownRefresh": true
2、JS文件
// 第一页数据接口 var urlPage1 = "http://app.api.autohome.com.cn/autov5.0.0/news/newslist-pm1-c0-nt1-p1-s30-l0.json"; // 定义page变量，用于实现加载更多 var page = 1; Page({ data: { dataList: [] }, onLoad: function (options) { // 调用下拉刷新函数 this.onPullDownRefresh() }, // 定义onPullDownRefresh 函数，用户下拉操作时会激发 onPullDownRefresh: function () { // 开启消息提示框 wx.showToast({ title: \'刷新数据\', icon: \'loading\', duration: 10000 }) var that = this; wx.request({ url: urlPage1, data: {}, method: \'GET\', success: function (res) { // 将页面数据（dataList）设置为第一页数据，将页面变量（page）设置为初始值。 that.setData({ dataList: res.data.result.newslist }); page = 1; }, complete: function () { // 结束下拉刷新shu刷新 // 隐藏提示框 wx.stopPullDownRefresh() setTimeout(function () { wx.hideToast() }, 800) } }) }, // 定义onReachBottom函数，当视图滑动到底部上拉时激发 onReachBottom: function () { // 因为分页加载的数据太多，无法模拟没有数据的情况，所以使用page >= 4来模拟。 if (page < 4) { // 已下载数据的最后一条的lasttime var lasttime = this.data.dataList[this.data.dataList.length - 1].lasttime; var path = \'http://app.api.autohome.com.cn/autov5.0.0/news/newslist-pm1-c0-nt1-p\' + (page + 1) + \'-s30-l\' + lasttime + \'.json\'; console.log(path); wx.showToast({ title: \'加载更多\', icon: \'loading\', duration: 10000 }) var that = this; wx.request({ url: path, data: {}, method: \'GET\', success: function (res) { // 将本次下载的数据，添加到dataList that.setData({ dataList: that.data.dataList.concat(res.data.result.newslist) }); // 下载数据时，使用（page + 1），下载数据成功时，将page += 1，可以实现第n次上拉，加载第(n + 1)页。 page += 1; }, complete: function () { setTimeout(function () { wx.hideToast() }, 800) } }) //模拟没有跟多了 } else { wx.showToast({ title: \'没有更多啦\', icon: \'loading\', duration: 1000 }) } } })
3、WXML文件
<block wx:for=\'{{dataList}}\'> <view class=\'cell\'> <image src="{{item.smallpic}}"></image> <view class=\'right-view\'> <text class=\'title\'>{{item.title}}</text> <view class=\'right-view-bottom\'> <text class=\'time\'>{{item.time}}</text> <text class=\'replycount\'>{{item.replycount}}评论</text> </view> </view> </view> </block>
4、WXSS文件
.cell { display: flex; padding: 20rpx; border-bottom: 1rpx solid lightgray; } image { width: 200rpx; height: 140rpx; margin-right: 20rpx; } .right-view { display: flex; flex-direction: column; justify-content: space-between; } .right-view-bottom { font-size: 30rpx; } .title { font-size: 38rpx; } .replycount { float: right; }
