小程序组件-swipe多页切换，并支持下拉刷新，上拉加载，menu动态联动切换

前言

　　最近一个小程序项目中遇到一个需求，就是实现类似资讯类app的多页面切换的那种效果, 如下图:

　　

　　最终效果：

　　

1.功能分析

　　首先实现这个功能分为三步：

• 实现顶部menu菜单
• 实现多页面滑动切换
• 支持自定义下拉刷新和上拉加载

2.实现分析:

　　顶部menu菜单: 　

　　　　这个功能看实现效果，来决定难易程度，这里po主已经写过类似的组件，所以这块直接完事。

　　多页面滑动切换:

　　　　在微信小程序中这个效果还是比较容易实现的,直接上一个swiper就完事了。

　　上拉加载:

　　　　swpier里面套用一个scroll-view，然后监听scroll-view的bindscrolltolower 事件就好了。

　　下拉刷新:　

　　　　这里着重介绍下拉加载，这里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):

• listPage组件地址(小程序多页swipe切换,自定义下啦刷新和上拉加载,以及顶部menu滚动)