小程序组件-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):

 

  

 

 

猜你喜欢

转载自www.cnblogs.com/haha1212/p/11184595.html
0条评论
添加一条新回复