上一篇我们讲了配置【小程序实现上拉分页】，有兴趣的小伙伴可以移步至小程序实现上拉分页查看。这一节我们讲【小程序实现下拉刷新】。
下拉刷新这个玩意吧，很有用，但是在我博客关联的小程序中，用处不大，也是，我那个小程序一共也没有几个页……
我这里还是用在首页，上拉分页，下拉刷新重载分页。我就是这么做的。
下拉刷新和上拉分页还是有区别的。
下拉刷新需要在index.json中添加属性：
"enablePullDownRefresh": true
Index.js
Page({
data: {
// 文章数组
articleList:[],
//每页显示的行数：
pagesize: 20,
//页码（从1开始）
page:1,// 文章页码
//用于标识是否还有更多的状态
state: 1,
//用于数组的追加和暂存
allProject: [],
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var self = this;
self.getArticleList();
},
/**
* 获取文章列表
*/
getArticleList()
{
var self = this;
// 请求后台接口获取文章列表
wx.request({
// 请求连接
url: 'https://guanchao.site/index/xxxx/xxxxx,
// 请求所需要的的参数
data: {
'page':self.data.page
},
success(result){
var resData = result.data;
var resLength = result.data.length;
//如果搜出来的结果<1 就说明后面已经没数据可加载了，所以将state设为0
if (resLength < 1)
{
self.setData({
state: 0
});
}
else
{
var state1 = 1;
//如果有数据，但小于每次期望加载的数据量（pagesize）,将state设为0，表示后面已没有数据可加载
if (resLength < self.pagesize)
{
var state1 = 0;
}
//循环将结果集追加到数组后面
for (var i = 0; i < resLength; i++) {
self.data.allProject.push(resData[i]);
}
self.setData({
articleList: self.data.allProject,
state: state1
});
}
wx.hideLoading();
}
});
},
/**
* 下拉刷新
*/
onPullDownRefresh() {
// 下拉刷新
var self = this;
wx.showLoading({
title: '加载中...',
});
// 页码重新设置回1
self.data.page = 1;
// 将显示列表数据清空
self.data.allProject = [];
self.getArticleList();
wx.stopPullDownRefresh();
},
});可以看到，我们增加了一个onPullDownRefresh函数并在里面调用了getArticleList去请求第一页的数据，并且页面显示数据的数组清空， 页码设置成1，重新加载数据。
另外，下拉刷新的事件也可以通过调用APIwx.startPullDownRefresh触发，效果与用户手动下拉刷新一致。
微信小程序其实我觉得就是一个基于微信的APP。嗯，个人看法。
