这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战
首先吐槽下微信小程序的文档，真是够坑人的。纵览scroll-view文档页面，在设置了很显然的一个配置属性refresher-enabled为true开启下拉动画之后，却无论如何也找不到怎么写自定义动画内容的文档（替换默认三个圆点效果）。然后谷歌了下，逐一点开前面的文章，发现也没有找到自定义实现动画的内容。（有的实现是自己监听touch事件来实现，需要写一大段js逻辑代码）
最最最后才不经意间，通过文档下面的示例代码才发现自定义动画内容的写法,好家伙！！！
直接上代码： wxml
<scroll-view
scroll-y
style="width: 100%; height: 100vh;"
refresher-enabled="{{true}}"
refresher-threshold="{{80}}"
refresher-default-style="none" // 关键设置属性，设置none表示自定义实现
bindrefresherrefresh="play"
refresher-background="lightgreen" // 下拉背景色
>
<view slot="refresher" class="refresh-container">
// 这里写自定义内容
</view>
</scroll-view>
注意上面的slot="refresher",原来是这么写的！！！
知道了怎么写自定义内容，接下来就简单了。但是依然有需要值得注意的地方，如下：
无法嵌入canvas标签
本想用在下拉内容中放一个lottie动画，但是插入canvas标签后发现页面始终无法显示，控制台也没有报错，写了一些简单的绘制矩形代码测试，发现也是无法显示，而一旦将canvas放在页面上则能正常显示，所以结论是：在自定义下拉显示内容内是无法嵌入canvas标签的。替代方案可以用gif图实现。下图效果就是使用gif图实现（lottie官网随便找的素材实现，效果没那么精致）：
可以通过wxs提升动画性能
在官方示例代码中（效果如下图：背景色透明度渐变，字体逐渐变大的相对复杂效果）
用到了wxs，它运行在视图层（Webview），可以减少视图层与逻辑层的通讯，提高页面性能，从而实现更流畅的下拉动画效果。详情可以移步：WXS响应事件
