uniapp 电商小程序 页面级下拉刷新与scroll-view组件级下拉刷新
下拉刷新功能
下拉刷新功能是指在当前页面重新刷新页面,调取数据的过程。
uniapp 官网中,关于下拉刷新是有API的。此API有3个函数。分别如下介绍:
页面级的下拉刷新事件
onPullDownRefresh——监听用户下拉刷新事件
如果你的页面中,下拉刷新是需要用户手动执行,则可以通过这个函数进行下拉刷新。
这个也是我这边经常用到的。
使用此API有两个满足条件。
- 需要在Page.json中,相应页面中的style中进行开启下拉刷新功能
- 此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
组件。
使用如下: