前言
最近一个小程序项目中遇到一个需求, 就是实现类似资讯类 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 滚动) https://github.com/singletouch/small-demo
来源: https://www.cnblogs.com/haha1212/p/11184595.html