uniapp 电商小程序 页面级下拉刷新与scroll-view组件级下拉刷新

下拉刷新功能

下拉刷新功能是指在当前页面重新刷新页面，调取数据的过程。

uniapp 官网中，关于下拉刷新是有API的。此API有3个函数。分别如下介绍：

页面级的下拉刷新事件

onPullDownRefresh——监听用户下拉刷新事件

如果你的页面中，下拉刷新是需要用户手动执行，则可以通过这个函数进行下拉刷新。

这个也是我这边经常用到的。

使用此API有两个满足条件。

1. 需要在Page.json中，相应页面中的style中进行开启下拉刷新功能
2. 此api只针对页面级的下拉刷新，如果你的下拉刷新不管用，则可能是在组件内下拉，没有触发到页面级的下拉操作，这个我们会在后面的组件级下拉刷新中讲到。

函数的使用方法如下：
第一步. pages.json中的对应页面的style中设置 enablePullDownRefresh:true
如下：

第二步：在页面中使用onPullDownRefresh，这个跟data onLoad 是同一级别的。
如下：

这步时，需要注意几点：
1）如果是分页加载数据的函数在此部分执行时，相当于重新加载此页面，则page需要从0或者1开始。
2）下拉刷新函数需要通过 停止下拉刷新函数 来停止。所以必须要用到uni.stopPullDownRefresh()函数。
3） 如果是如上所以的需要在下拉刷新时，多个函数加载数据，此时最正确的办法是：判断多个函数都加载完成后再弹窗提示“数据加载成功”，但是这样会比较麻烦，用户等待的时间是有限的，现在很少有人能够耐心等待页面加载，超过5秒如果页面还在刷新，用户一般都会选择放弃。为此，我是做了一个延时，1.5秒后就会弹窗提示加载成功。

startPullDownRefresh——开启用户下拉刷新事件

这个api跟onPullDownRefresh很类似，不过这个函数是指，如果不需要用户手动下拉，还希望执行下拉刷新函数时，就直接通过uni.startPullDownRefresh这个函数来操作。
这个函数同样是需要uni.stopPullDownRefresh函数来终止下拉刷新事件

stopPullDownRefresh——终止用户下拉刷新事件

上面已经提到了使用方法

组件级的下拉刷新事件

需求如下：
页面内容是通过swiper嵌套scrioo-view组件组合而成，


页面结构：
顶部为scroll-view横向滚动条
底部为swiper嵌套scroll-view纵向滚动条

如果在这个页面需要用到下拉刷新功能，在用户下拉时，其实是触发的scroll-view纵向滚动条中的下拉事件，无法触发到页面级的下拉事件。此时，如果通过onPullDownRefresh页面级的下拉事件，是没有效果的。

我的处理方式如下：
scroll-view 组件中是有组件下拉刷新功能的，需要用到的属性有：

1） refresher-enabled设置为true,就可以开启自定义下拉刷新
2） refresher-triggered设置当前下拉刷新状态，如果设置为true，则会页面会顶部会出现三个点，进入下拉刷新状态，如果需要结束下拉刷新状态，则可以设置为false

3) @refresherrefresh 自定义下拉刷新被触发
4）@refresherrestore 自定义下拉刷新被复位
还有其余的两个函数，我没有去使用，因为我这边是需要用户手动去触发这个下拉动作，然后再去执行上面的两个函数的。
具体实现方式如下：


onLoad中定义一个变量，此变量用来控制下拉刷新过程中，不允许再次进行刷新动作。

下拉刷新时的函数：如果已经在刷新中，则直接return，不进行刷新动作，反之，则可以设置当前组件的状态为刷新中，通过this.triggered=true来设置。this.getType()是加载数据的函数。

下拉刷新结束时的函数：此部分的加载成功的弹窗还是应该放在数据加载函数中，为了增强用户体验，此部分在数据加载函数this.getType()也是有的。然后就是状态设置成刷新前，通过两个变量设置为false来实现。

在使用这个方法的时候，由于使用了另一个组件load-more上拉加载组件，所以在下拉刷新的同时，也触发了下拉加载中的“弹窗提示加载中……”的弹窗提示，因此通过triggered变量来显示与隐藏load-more组件，也就是说下拉时隐藏load-more组件，其他时间显示load-more组件。

使用如下：