Foreword
Recently encountered a project needs a small program, it is to achieve the kind of results similar information class multi-page app switching, as shown below:
final effect:
1. Functional Analysis
First, to achieve this function is divided into three steps:
- Achieve top menu menu
- Multi-page slide switch
- Support for custom pull-down refresh and on ECLAC upload
2. Implement analysis:
Top menu menu:
This feature look to achieve results, to determine the degree of difficulty, where po Lord has written similar components, so this directly bin.
Multi-page slide switch:
In this applet micro-channel effect is relatively easy to implement, directly on a swiper get away.
On Raja contains:
swpier apply inside a scroll-view, and then monitor the bindscrolltolower scroll-view event just fine.
Pull down to refresh:
Here focuses on the drop-down load, po master the ins and outs here are three ways to change the implementation. details as follows:
1.scroll-view of onscroll to achieve with touchend
From relatively simple way to achieve this. By onscroll scroll-view event to judge the current negative scrollTop to achieve, which last touchend refresh the current scrollTop decide whether to drop down, but this approach can only have effect on ios, Andrews scroll-view because there is no flexibility scroll scrollTop there would be no negative, but less than ios fooled when a page of data, there will not be problems in the drop-down. Then abandoned.
2. scroll-view of touchstart, touchmove, touchend to achieve.
这种方式就是参考h5自定义下拉刷新的方式去实现。这种实现方式的好处就是不会在安卓上不动了，也不会在ios没数据的时候也滑不动了。但是，这里不知道是po主写的姿势有问题还是咋回事，正常下拉时候没问题，但是配合swiper左右切换的时候效果惨不忍睹。遂弃用。当然如果有高手是通过这种方式实现的并且配合swiper使用没问题的请告诉我。
3. 还是scroll-view,这次po主在scroll-view 外面套了个movable-area。
因为之前用movable-area做侧滑删除的时候效果就很nice，所以最后想着这里用来做下拉刷新是不是也会比较好。经过实践证明，确实是非常好。而且安卓ios都能正常下拉。在siwper切换时候，由于这里用的movable-area也是原生组件所以相互影响就很小了，不像方法2里面自定义手势，不同方向去滚动效果就很惨烈。当然这里说的是影响小，并不是没有，不过在不是特别剧烈的操作下，效果基本是ok的。
3.代码实现
由于代码比较多，不好一一贴出来，所以直接上项目地址了(求star):