小程序自定义导航栏后下拉刷新思考

背景

由于小程序原生的导航栏很难满足现有的需求，所以很多开发者会考虑通过"navigationStyle": "custom"自定义一个符合要求的导航栏，而这个自定义导航栏的操作往往是发生在全局配置的app.json中。也就是说每个页面都需要使用自定义的导航栏以便统一风格。
同时，项目中总有页面需要下拉刷新或上拉加载更多的需求，小程序在自定义导航栏之后，如需使用原有的enablePullDownRefresh就会遇到如下两个问题：

问题1：自定义导航栏后原有的下拉刷新动画位置显示不正确

然而对于这个bug，官方的回应是：

既然微信还没修复这个问题，那么我最先的想法是在自定义的导航栏底层自定义一个可以滑动的下拉刷新动画，同时利用微信提供的 backgroundTextStyle隐藏系统自带的下拉刷新样式。这样即可以触发微信原有的下拉刷新方法，又能自定义动画。
但是，出现了第二个问题。

问题2：自定义导航栏后，开启系统下拉刷新会导致安卓端fixed的元素一起向下滑动。
也就是整个导航栏会跟着一起滑动下去（iOS端没有问题）。所以目前看来，如果你自定义可导航栏，那么系统原生的下拉刷新是没办法使用的。

正文

因为这两个硬性bug，导致目前的小程序开发者要么使用微信原生的导航栏+刷新，要么是把列表通过微信组件scroll-view包装一层，然后使用bindscrolltoupper和bindscrolltolower处理刷新方法。
文档中有明确指出：

所以这种方式固然也不是什么好办法，只是当下的没有办法的办法。

此外，scroll-view本身，对于iOS和安卓两端的处理又有一些区别，比如iOS端在scrollTop下拉会有一个弹簧效果，即scrollTop可能出现负值。但是在安卓端就没有这样一个弹簧效果。所以才会有官方文档中的第4条若要使用下拉刷新，清使用页面的滚动。

效果图

上面这个GIF是我尝试性的做了一个假的下拉刷新动画，置于scroll-view的顶部。触发和推出时都用createAnimation()处理，尽可能让其变得流畅一点。

使用

1 将组件导入您的项目，并引用

"usingComponents": {
    "top-refresh": "/components/top-refresh/top-refresh"
  }

2 wxml，绑定一个唯一id

3 js，相应位置触发

const com = that.selectComponent('#tfresh')
// 控制是否正在刷新
if (com.data.toprefresh) {
  return
}
// 启动刷新动画
com.refreshstart()
// 停止刷新动画
com.refreshend()

当然，你可以把它用在scrollview底部。
如果你有安装微信开发者工具，可以直接查看这个代码块。

注意：
这个组件并没有对scrollview触发下拉的方式起作用，只是做了一个动画告诉用户现在页面正在刷新。你也可以使用其他的方式（比如b站在下拉的时候会调用设备震动的API，告诉用户下拉的时候触发了刷新操作）。

结尾

我觉得小程序是一个高度封装的开发工具。所以应该用最简单的方式实现想要的效果。这才符合小程序设计的初衷。

希望小程序官方早点修复，让我们摆脱scroll-view。