源码时代H5前端小课堂：小程序交互中的下拉刷新

关注公众号.jpg

在小程序中onLoad生命钩子只在页面创建时调用一次，在做navigateTo页面跳转后，返回上级页面，由于navigateTo跳转只是隐藏了当前页面，因此返回上一级页面时onLoad生命钩子不会再次执行，这样带来的好处是页面能快速展示出来，但是onLoad中的请求数据不会实时更新，这时候就需要一个下拉刷新的操作来帮助用手动更新页面数据，接下来这篇文章将会介绍小程序中实现下拉刷新的三种方式

enablePullDownRefresh

enablePullDownRefresh是最容易实现下拉刷新的方法，在json文件中将enablePullDownRefresh设置为true，在Page中监听onPullDownRefresh事件即可，支持点击顶部标题栏回到顶部，自定义标题栏时会失效，还可以通过直接调用wx.startPullDownRefresh()触发下拉刷新事件，产生下拉刷新动画，处理完下拉刷新中的数据更新后调用wx.stopPullDownRefresh()结束动画即可。
这种形式的下拉刷新的优点很明显就是简单，没有限制，但是缺点也同样明显：

下拉动画太过简单，交互不够优雅且不能自定义下拉动画

scroll-view

scroll-view是官方的一个滚动视图组件，使用很简单，想要设置上拉刷新代码如下：

<scroll-view class="scroll" scroll-y bindscrolltoupper="refresh">

<view class="content">content</view>

</scroll-view>

想要利用scroll-view实现上拉刷新，需要注意：

• 一定要给scroll-view设置固定高度，否则监听事件不会触发
• 设置纵向滚动scroll-y
• scroll-view内的内容高度一定要比scroll-view高度要高，否则无法产生纵向滚动，就无法触发监听事件

scroll-view缺点：

• 由于iOS有橡皮筋效果，因此最终效果会与Android有一定的差异
• 刚打开页面时上拉是无法触发上拉监听事件，需要先向下滚动，触发滚动，然后再上拉滚动才能触发监听事件
• 当有自定义头部时，scroll-view需要一个高度计算，减去头部高度

scroll-view优点：

• 可以自定义加载动画
• 代码相对简单
• 相对enablePullDownRefresh，scroll-view对滚动列表控制更加方便：
  • scroll-into-view：滚动到指定元素
  • enable-back-to-top：iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向，且当自定义标题栏后就会失效

官方并不推荐使用scroll-view做下拉刷新，官方文档上有这样一个tip：

image