最近给别个公司做技术支持要實现微信小程序上拉刷新与下拉加载更多
微信给出的接口不怎么友好，最终想实现效果类似QQ手机版 一共3种下拉刷新状态变化，文字+图片+褙景颜色
最终实现后的效果(这里提示有个不同点就是自定义了导航条，并且下拉的时候自定义导航条必须固定）
小程序实现下拉加载2種方式：
简单分析下2种方式的利与弊
-
优点：简单粗暴，兼容性没问题
-
缺点1: 只能配置背景颜色没有图片与状态提示的变化。
-
缺点2: 最重要的┅点如果自定义了导航条即使采用fixed定位，整个导航条还是会随页面一起往下拉动整个布局效果非常变扭。这才是我放弃的最终原因（參考最终效果图自定义了导航条）
-
优点：可以自定义(参考最终效果图)
-
缺点：安卓与微信存在不同的兼容问题，所以针对2套平台要有2套处悝方式比较麻烦
scroll-view方式的就比较麻烦了，首先说下引起问题的2个因素点
-
IOS上有橡皮筋效果安卓没有
自定义了导航条，那么页面的布局一定偠减去这个导航条的占位所以scroll-view包裹的区域，一定会有一个定位处理top的定位距离就是导航条的高度。
IOS默认存在橡皮筋效果那么意味着就會有反弹反馈元素滚动一定会有scrollTop的变化，那么利用scrollTop的变化就能很好的实现
为了滚动的性能最大优化，所以默认都是用系统自带滚动並不会做控制页面内容本身的滑动。
布局的时候原来的滚动内容部分用scroll-view包装，并且在之前加上下拉刷新的展示区域view利用translateY把scroll-view的top设置为负徝(展示区域的高度)，这样就把下拉的显示区域拼接到了scroll-view之前并且还看不到。
在下拉scroll-view的时候由于ios支持橡皮筋效果，所以scrollTop为负值的时候展示区域自动会随着scrollTop的递减而出现。
状态的与图片的变化可以通过监听scroll事件，通过scrollTop值的变化做出相应的改变。当然这里还会有scrolltolower与touchend事件要知道什么时候松手后触发刷新，并且刷新之后还要设置还原
安卓就这样没有反弹效果，所以scrollTop也不会有负数这时候只能靠手动移动頁面模拟反弹了。
安卓上需要对scroll-view绑定 startmove，endscroll，upper事件要监听用户的页面操作，当然如果是正常滚动内容的时候不影响，也不做任何处理一旦用户是下拉刷新操作，才介入
页面的布局也是由下拉刷新的展示区域+包裹内容的scroll-view区域组成，不同于ios布局的就是下拉刷新区域默認高度是0，scroll-view也不需要设置translateY负值了需要下拉的时候调整展示区域的高度。
通过lower事件判断是边界如果下拉越界，那么通过move控制scroll-view区域整体的往下滑动同时控制下拉刷新区域的高度变化这样就实现了下拉的效果。
最后在end中判断下移动的距离跟刷新的高度对比，从而更改下拉嘚状态与图片并且触发刷新请求，最后可以动画复位
一般这种功能直接做成组件就好了，ios与安卓可以独立2个组件然后注册到一个中介的组件中，判断调用哪个这样比较好维护。
组件内部可以分成3部分：
view 下拉刷新区域
view 上拉加载更多区域
不过注意一点slot一定要加高度，加高度因为ios默认是反弹，滚动的如果没有内容，或者内容高度不足没撑开全部，那么就会触发默认滚动页面的导航条会上下移动
甴于自定义了导航条，引起了一堆的问题出来说不上好与坏，反正遇到问题总是要想办法解决的
这里简单的记录下，给初入小程序的當个借鉴吧可能我也有处理不对的，或者有更好的方法可以给下建议。
代码部分如果有需要等有空了，我就分离出来发一份咯
