微信小程序列表页实现上拉加载下拉刷新

2019独角兽企业重金招聘Python工程师标准>>>

iOS开发里有MJRefresh，Android里有PullToRefresh

那咱撸起袖子也来重复造个轮子吧。

效果展示：

微信在2016.10.28更新的版本赋予了上拉加载的能力

A 新增 Page.onReachBottom() 方法，监听页面到达底部

1. 首先要后端(LeanCloud)实现分页，传入每页条数与当前页码

query.limit(10);// 最多返回 10 条结果
query.skip(20);// 跳过 20 条结果

文档出处：https://leancloud.cn/docs/leanstorage_guide-js.html#限定返回数量

以上示例显示第3页的结果，每页10条

按照以上指导，实现了后端的代码如下：

	getGoods: function(category, pageIndex){
		var pageSize = 7;
		var that = this;
        var query = new AV.Query('Goods');
        // 查询顶级分类，设定查询条件parent为null
        query.equalTo('category',category);
        // 分页查询
        query.limit(pageSize);// 最多返回 10 条结果
		query.skip(pageIndex * pageSize);// 跳过 20 条结果
        query.find().then(function (goods) {
            that.setData({
                goods: goods
            });
        }).catch(function(error) {
        });
	}

2. 监听滚动到页尾

页码由初始加载第0页，变成加载第1页

	onReachBottom: function () {
		this.getGoods(this.category, 1);
	}

3. this.data.goods应该就是一个可变数组，用于迭加，而不是覆盖that.setData({ goods: goods });

                // 让goods结果集迭加
        	var originGoods = that.data.goods;
        	// 如果初始有值，就合并；否则就是新数据集本身
        	var newGoods = originGoods.length > 0 ? originGoods.concat(goods) : goods;
            that.setData({
                goods: newGoods
            });

现在是初级的上拉加载已经是可以了

4. 第2页加载中显示loading提示

	onReachBottom: function () {
		this.getGoods(this.category, 1);
		wx.showToast({
		  title: '加载中',
		  icon: 'loading'
		})
	}

        query.find().then(function (goods) {
        	// 关闭loading提示框
        	wx.hideToast();
        	// 让goods结果集迭加
        	var originGoods = that.data.goods;
    ...

5. 实现下拉刷新

        onPullDownRefresh: function () {
		this.getGoods(this.category, 0);
		wx.showToast({
		  title: '加载中',
		  icon: 'loading'
		})
	}

满心以为这样就可以了，却没有反应，翻看文档才是还要加一个配置

{
	"enablePullDownRefresh": true,
	"backgroundTextStyle": "dark"
}

以上配置代码加在新建的list.json中，而对于背景是纯白的backgroundTextStyle使用dark，由于自带了loading，所以把showToast(loading)也去了吧。

该demo源码已托管到码云：http://git.oschina.net/dotton/lendoo-wx，本文涉及代码存于/pages/goods/list文件夹中。

对移动开发有兴趣的朋友可以关注我的公众号【huangxiujie85】与我交流讨论，给我留言或文章评论。

转载于:https://my.oschina.net/huangxiujie/blog/818411