微信小程序学习（18） —— 上拉加载和下拉刷新

在微信小程序上实现下拉刷新、上拉加载的效果

 

 

 

使用系统提供的onPullDownRefresh、onReachBottom这2个事件，

前提需要在app.json或page.json配置文件中设置，才能使用。

app.json是全应用的页面都可以使用该事件，page.json则只是对应的页面才可以使用。

 

属性	类型	默认值	描述
enablePullDownRefresh	Boolean	false	是否开启下拉刷新。

 

 

示例：

app.json：

在app.json文件里设置window属性

 

1. {

2. "window":{

3. "enablePullDownRefresh": true

4. }

5. }

 

 

 

page.json：

在page.json文件里直接设置属性 

 

1. {

2. "enablePullDownRefresh": true

3. }

 

 

 

示例：

可以结合导航栏loading显示正在加载的效果

1. Page({

2. data: {

3. pageNum: 1, // 设置加载的第几次，默认是第一次

4. isFirstLoad: true, // 用于判断List数组是不是空数组，默认true，空的数组

5. hasMore: false, // “加载更多”

6. },

7. // 下拉刷新

8. onPullDownRefresh: function () {

9. // 显示导航栏loading

10. wx.showNavigationBarLoading();

11. // 调用接口加载数据

12. this.loadData();

13. // 隐藏导航栏loading

14. wx.hideNavigationBarLoading();

15. // 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新

16. wx.stopPullDownRefresh();

17. },

18. // 上拉加载

19. onReachBottom(e) {

20. let that = this;

21. if (that.data.hasMore) {

22. that.setData({

23. pageNum: that.data.pageNum + 1, // 每次触发上拉事件，把pageNum+1

24. isFirstLoad: false // 触发到上拉事件，把isFirstLoad设为为false

25. });

26.  

27. that.loadData();

28. }

29. },

30. })

内容转自：https://blog.csdn.net/michael_ouyang/article/details/55215104