列表上拉下拉加载数据是再常见不过的功效，，第一个想到的是scroll-view组件，，内里有两个事务，，划分是bindscrolltoupper（拉到最顶部）和bindscrolltolower（拉到最底部），，用bindscrolltoupper实现上拉效果极差，，稍微滑一下就触发，，也就是说一言不对就下拉刷新列表，，体验很差，，网上百度了良久说是scroll-view不可和onPullDownRefresh联用，，不明觉厉，，最后总结一下终结步伐

效果预览 
不必scroll-view组件 
在需要的页面翻开设置（不需要在全局设置，，我用的是wepy，，不需要在app.wpy写）

1. config = {
2. navigationBarTitleText: '测试上拉下拉',
3. // 不要把true写成 'true'
4. enablePullDownRefresh: true,
5. // 不配成dark的话三个加载中的点会看不到，，着实是出来了，，只是三个点是白色的，，若是你的页面配景也是白的，，那就看不出效果了
6. backgroundTextStyle: 'dark'
7. }

来个长长的列表

1. <template>
2. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
3. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
4. <view wx:if="{{i <= j}}">
5. {{i}} * {{j}} = {{i * j}}
6. </view>
7. </view>
8. </view>
9. </template>

要害事务

1. onPullDownRefresh() {
2. console.log('下拉刷新列表')
3. }
4. onReachBottom() {
5. console.log('上拉加载下一页')
6. }

在微信开发者工具跑起来没什么问题，，在真机跑一下，，三个点下来以后竟然不上去了，，很尴尬，，最后在参考文章第二篇的谈论里一位网友的回覆解决了这个问题，，手动让三个点弹回去，，wx.stopPullDownRefresh()，，小程序API里有，，可以点这里自行看一下

1. onPullDownRefresh() {
2. console.log('下拉刷新列表')
3. // 5秒模拟数据加载
4. setTimeout(function () {
5. // 不加这个要领真机下拉会一直处于刷新状态，，无法复位
6. wepy.stopPullDownRefresh()
7. }, 5000)
8. }
9. onReachBottom() {
10. console.log('上拉加载下一页')
11. }

完整代码

1. <template>
2. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
3. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
4. <view wx:if="{{i <= j}}">
5. {{i}} * {{j}} = {{i * j}}
6. </view>
7. </view>
8. </view>
9. </template>
10.  
11. <script>
12. import wepy from 'wepy'
13.  
14. export default class Refresh extends wepy.page {
15. config = {
16. navigationBarTitleText: '测试上拉下拉',
17. enablePullDownRefresh: true,
18. backgroundTextStyle: 'dark'
19. }
20. components = {
21. }
22. data = {
23. }
24.  
25. computed = {
26. }
27.  
28. methods = {
29. }
30.  
31. events = {
32.  
33. }
34. onLoad() {
35. }
36. onPullDownRefresh() {
37. console.log('下拉刷新列表')
38. setTimeout(function () {
39. // 不加这个要领真机下拉会一直处于刷新状态，，无法复位
40. wepy.stopPullDownRefresh()
41. }, 5000)
42. }
43. onReachBottom() {
44. console.log('上拉加载下一页')
45. wepy.showToast({
46. title: '上拉加载下一页',
47. icon: 'none',
48. mask: true,
49. duration: 1000
50. })
51. }
52. }
53. </script>
54.  
55. <style lang="less">
56. </style>