前言
最近一个小程序项目中遇到一个需求，就是实现类似资讯类app的多页面切换的那种效果, 如下图:
最终效果：
1.功能分析
首先实现这个功能分为三步：
- 实现顶部menu菜单
- 实现多页面滑动切换
- 支持自定义下拉刷新和上拉加载
2.实现分析:
2.1顶部menu菜单:
这个功能看实现效果，来决定难易程度，这里po主已经写过类似的组件，所以这块直接完事。
2.2多页面滑动切换:
在微信小程序中这个效果还是比较容易实现的,直接上一个swiper就完事了。
2.3上拉加载:
swpier里面套用一个scroll-view，然后监听scroll-view的bindscrolltolower 事件就好了。
2.4下拉刷新:
这里着重介绍下拉加载，首先小程序原生的下拉刷新在swiper上场的时候已经不好使了，因为swiper占全屏的滑会使原生的下拉刷新失效，所以这里需要自定义下拉刷新。
这里po主前前后后换了三种方式实现方式。具体如下:
1.scroll-view 的onscroll 配合 touchend 去实现：
这种方式实现起比较简单。通过 scroll-view 的 onscroll 事件去判断当前的 scrollTop 的负值来实现，最后 touchend 里面根据当前scrollTop决定是否需要下拉刷新，但是这种方式只能在ios上有效果，因为安卓的scroll-view没有弹性滚动也就不会有scrollTop负值，而且ios上当页面数据不足一页时候，也会出现无法下拉的问题。遂弃用。
2.scroll-view 的touchstart，touchmove , touchend 去实现：
这种方式就是参考h5自定义下拉刷新的方式去实现。这种实现方式的好处就是不会在安卓上不动了，也不会在ios没数据的时候也滑不动了。但是，这里不知道是po主写的姿势有问题还是咋回事，正常下拉时候没问题，但是配合swiper左右切换的时候效果惨不忍睹。遂弃用。当然如果有高手是通过这种方式实现的并且配合swiper使用没问题的请告诉我。
3.还是scroll-view,这次po主在scroll-view 外面套了个movable-area去实现：
因为之前用movable-area做侧滑删除的时候效果就很nice，所以最后想着这里用来做下拉刷新是不是也会比较好。经过实践证明，确实是非常好。而且安卓ios都能正常下拉。在siwper切换时候，由于这里用的movable-area也是原生组件所以相互影响就很小了，不像方法2里面自定义手势，不同方向去滚动效果就很惨烈。当然这里说的是影响小，并不是没有，不过在不是特别剧烈的操作下，效果基本是ok的。
3.代码实现
由于代码比较多，不好一一贴出来，所以直接上项目地址了(求star):
