微信小程序实现下拉更新数据、上拉加载更多

下拉更新数据：

应用场景：刷新列表数据。

1. 在app.json文件或页面对应的JSON文件中配置"enablePullDownRefresh": true；

//下拉更新数据
onPullDownRefresh(){
       let _this = this;
        _this.getShopOrderList(_this.page);
        setTimeout(()=>{
        	wx.stopPullDownRefresh();
        })
},
methods: {
	getShopOrderList:function(page){
		let _this = this;
		_this.$API
                    .getShopDeliveryList({                 
                        page:page,
                        pageSize:_this.pageSize
                    })
                    .then(res => {
                       _this.orderList = res.billList;
                    })
                    .catch(res => {});
	}
}

可以通过wx.startPullDownRefresh() 触发下拉刷新，效果与用户手动下拉刷新一致。

上拉加载更多：

应用场景：数据的分页加载。

1. 在app.json文件或页面对应的JSON文件中设置"onReachBottomDistance":50触发距离；

//上拉加载下一页
onReachBottom(){
       let _this = this;
       
       //判断到是最后一页，则停止刷新
       if((1+_this.page) > _this.totalPage){  
             _this.tip('没有更多了！');
             return false;
		}
		
        _this.getShopOrderList(1+_this.page);
        _this.page = 1+_this.page;
},
methods: {
	getShopOrderList:function(page){
		let _this = this;
		_this.$API
                    .getShopDeliveryList({              
                        page:page,
                        pageSize:_this.pageSize
                    })
                    .then(res => {                  
						 _this.orderList = _this.orderList.concat(res.billList);
                        _this.totalPage = Math.ceil(res.total/res.pageSize);
                    })
                    .catch(res => {});
	}
}