微信小程序-自定义下拉刷新

最近给别个公司作技术支持，要实现微信小程序上拉刷新与下拉加载更多

微信给出的接口不怎么友好，最终想实现效果相似QQ手机版 ，一共3种下拉刷新状态变化，文字+图片+背景颜色

 

最终实现后的效果(这里提示有个不一样点就是，自定义了导航条，而且下拉的时候，自定义导航条必须固定）

 

 

小程序实现下拉加载2种方式：

1. 简单粗暴，直接开启enablePullDownRefresh，开启全局下拉刷新

2.利用scroll-view组件

 

简单分析下2种方式的利与弊

enablePullDownRefresh方式

• 优势：简单粗暴，兼容性没问题
• 缺点1: 只能配置背景颜色，没有图片与状态提示的变化。
• 缺点2: 最重要的一点，若是自定义了导航条即便采用fixed定位，整个导航条仍是会随页面一块儿往下拉动，整个布局效果很是变扭。这才是我放弃的最终缘由（参考最终效果图，自定义了导航条）

 

scroll-view方式

• 优势：能够自定义(参考最终效果图)
• 缺点：安卓与微信存在不一样的兼容问题，因此针对2套平台要有2套处理方式，比较麻烦

 

实现原理：

enablePullDownRefresh的方式没啥好说的，按照文档的来。

 

scroll-view方式的就比较麻烦了，首先说下引发问题的2个因素点

• 自定义了导航条
• IOS上有橡皮筋效果，安卓没有

 

自定义了导航条，那么页面的布局必定要减去这个导航条的占位，因此scroll-view包裹的区域，必定会有一个定位处理，top的定位距离就是导航条的高度。

 

IOS上scroll-view的实现原理

IOS默认存在橡皮筋效果那么意味着就会有反弹反馈，元素滚动必定会有scrollTop的变化，那么利用scrollTop的变化就能很好的实现

为了滚动的性能最大优化，因此默认都是用系统自带滚动，并不会作控制页面内容自己的滑动

布局的时候，原来的滚动内容部分用scroll-view包装，而且在以前加上下拉刷新的展现区域view，利用translateY把scroll-view的top设置为负值(展现区域的高度)，这样就把下拉的显示区域拼接到了scroll-view以前，而且还看不到

在下拉scroll-view的时候，因为ios支持橡皮筋效果，因此scrollTop为负值的时候，展现区域自动会随着scrollTop的递减而出现。

状态的与图片的变化，能够经过监听scroll事件，经过scrollTop值的变化，作出相应的改变。固然这里还会有scrolltolower与touchend事件，要知道何时松手后触发刷新，而且刷新以后还要设置还原

 

安卓上scroll-view的实现原理

安卓就这样，没有反弹效果，因此scrollTop也不会有负数。这时候只能靠手动移动页面模拟反弹了。

安卓上须要对scroll-view绑定 start，move，end，scroll，upper事件，要监听用户的页面操做，固然若是是正常滚动内容的时候，不影响，也不作任何处理，一旦用户是下拉刷新操做，才介入

页面的布局也是由下拉刷新的展现区域+包裹内容的scroll-view区域组成，不一样于ios布局的就是，下拉刷新区域默认高度是0，scroll-view也不须要设置translateY负值了，须要下拉的时候调整展现区域的高度

经过lower事件判断是边界，若是下拉越界，那么经过move控制scroll-view区域总体的往下滑动同时控制下拉刷新区域的高度变化，这样就实现了下拉的效果

最后在end中，判断下移动的距离跟刷新的高度对比，从而更改下拉的状态与图片，而且触发刷新请求，最后能够动画复位

 

封装

通常这种功能直接作成组件就行了，ios与安卓能够独立2个组件，而后注册到一个中介的组件中，判断调用哪一个，这样比较好维护。

组件内部能够分红3部分

view 下拉刷新区域
slot 内容的slot区域
view 上拉加载更多区域

不过注意一点，slot必定要加高度，加高度。由于ios默认是反弹，滚动的，若是没有内容，或者内容高度不足，没撑开所有，那么就会触发默认滚动，页面的导航条会上下移动

<view style="min-height:100%;">
  <slot></slot>
</view>

　　

结尾：

因为自定义了导航条，引发了一堆的问题出来，说不上好与坏，反正遇到问题老是要想办法解决的。

这里简单的记录下，给初入小程序的当个借鉴吧。可能我也有处理不对的，或者有更好的方法，能够给下建议。

代码部分若是有须要，等有空了，我就分离出来发一份咯。