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

迈不过友情╰ 2021-07-25 13:19 1181阅读 0赞

## 下拉刷新功能 ##

下拉刷新功能是指在当前页面重新刷新页面，调取数据的过程。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
uniapp 官网中，关于下拉刷新是有API的。此API有3个函数。分别如下介绍：

## 页面级的下拉刷新事件 ##

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

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

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

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

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

![在这里插入图片描述][20200718132929848.png]  
函数的使用方法如下：  
第一步. pages.json中的对应页面的style中设置 enablePullDownRefresh:true  
如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
第二步：在页面中使用`onPullDownRefresh`，这个跟data onLoad 是同一级别的。  
如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
这步时，需要注意几点：  
1）如果是分页加载数据的函数在此部分执行时，相当于重新加载此页面，则page需要从0或者1开始。  
2）下拉刷新函数需要通过 停止下拉刷新函数 来停止。所以必须要用到`uni.stopPullDownRefresh()`函数。  
3） 如果是如上所以的需要在下拉刷新时，多个函数加载数据，此时最正确的办法是：判断多个函数都加载完成后再弹窗提示“数据加载成功”，但是这样会比较麻烦，用户等待的时间是有限的，现在很少有人能够耐心等待页面加载，超过5秒如果页面还在刷新，用户一般都会选择放弃。为此，我是做了一个延时，1.5秒后就会弹窗提示加载成功。

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

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

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

上面已经提到了使用方法

## 组件级的下拉刷新事件 ##

需求如下：  
页面内容是通过swiper嵌套scrioo-view组件组合而成，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
页面结构：  
顶部为scroll-view横向滚动条  
底部为swiper嵌套scroll-view纵向滚动条

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

我的处理方式如下：  
scroll-view 组件中是有组件下拉刷新功能的，需要用到的属性有：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]  
1） `refresher-enabled`设置为true,就可以开启自定义下拉刷新  
2） `refresher-triggered`设置当前下拉刷新状态，如果设置为true，则会页面会顶部会出现三个点，进入下拉刷新状态，如果需要结束下拉刷新状态，则可以设置为false

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]  
3) `@refresherrefresh` 自定义下拉刷新被触发  
4）`@refresherrestore` 自定义下拉刷新被复位  
还有其余的两个函数，我没有去使用，因为我这边是需要用户手动去触发这个下拉动作，然后再去执行上面的两个函数的。  
具体实现方式如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][20200718135252558.png]  
onLoad中定义一个变量，此变量用来控制下拉刷新过程中，不允许再次进行刷新动作。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]  
下拉刷新时的函数：如果已经在刷新中，则直接return，不进行刷新动作，反之，则可以设置当前组件的状态为刷新中，通过`this.triggered=true`来设置。`this.getType()`是加载数据的函数。

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

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

使用如下：  
![在这里插入图片描述][2020071814013467.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/e81514fd888a4832a9e669a2a6036d19.png
[20200718132929848.png]: /images/20210725/9db3b98c456f4b03b16a24f03b94fe6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/6bedb5bc575e436ab6efacd4ae572c57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/0fea9a800df240f99fd65e1a3ad76356.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/09b2549868a9425dbcbcb86a4e80b3a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/4b56dcb01e2247f39678e136bf37a972.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/31ba59f4476b4c7f8635066340478004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20210725/24243aae1b3f4e3380ace1452c145ebe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20210725/d0ea70bba4984c21bc5b1024f03e1d28.png
[20200718135252558.png]: /images/20210725/f096025ab33844af9d240d0c31ac3f67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20210725/823ff1c48e00437091cee6912c429009.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]: /images/20210725/d8d228bae0024f439076485295d62cdf.png
[2020071814013467.png]: /images/20210725/0cc5e6f8ce5e4ad680592b691fe58330.png