微信小程序-Swiper和下拉刷新组件

前言

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

最终效果：

效果体验:

功能分析

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

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

 

实现分析

顶部tab菜单

这里的tab菜单支持横向滑动，因此咱们使用scroll-view，这样能够经过scrollLeft来控制scroll-view的滚动。咱们使用小程序 createSelectorQuery 方法来获取全部tab的宽度，这样就能够在点击事件发生的时候肯定滚动的距离。而后还须要计算每个tab的padding，用于计算线条的滚动距离。而后还须要计算每一个tab的子元素的宽度，以实现滚动事后线条宽度的变化。

• tab组件源代码

 

多页面滑动切换

在微信小程序中这个效果仍是比较容易实现的,直接使用swiper就能够了。

 

上拉加载

swpier里面套用一个scroll-view，而后监听scroll-view的bindscrolltolower 事件就能够实现上拉加载了。　　

 

下拉刷新

这里着重介绍下拉加载，首先小程序原生的下拉刷新在swiper上场的时候已经很差使了，由于swiper占全屏时会使原生的下拉刷新失效，因此这里须要自定义下拉刷新。这里po主前先后后换了三种方式实现方式。具体以下:

 

scroll-view 的onscroll 配合 touchend 去实现

这种方式实现起比较简单。经过 scroll-view 的 onscroll 事件去判断当前的 scrollTop 的负值来实现，最后 touchend 里面根据当前scrollTop决定是否须要下拉刷新，可是这种方式只能在ios上有效果，由于安卓的scroll-view没有弹性滚动也就不会有scrollTop负值，并且ios上当页面数据不足一页时候，也会出现没法下拉的问题。遂弃用。

 

scroll-view 的touchstart，touchmove , touchend 去实现

这种方式就是参考h5自定义下拉刷新的方式去实现。这种实现方式的好处就是不会在安卓上不动了，也不会在ios没数据的时候滑不动了。可是，这里不知道是po主写的姿式有问题仍是咋回事，正常下拉时候没问题，可是配合swiper左右切换的时候效果惨不忍睹。遂弃用。固然若是有高手是经过这种方式实现的而且配合swiper使用没问题的请告诉我。

 

仍是scroll-view,此次po主在scroll-view 外面套了个movable-area去实现

由于以前用movable-area作侧滑删除的时候效果就很nice，因此最后想着这里用来作下拉刷新是否是也会比较好。通过实践证实，确实是很是好。并且安卓ios都能正常下拉。在siwper切换时候，因为这里用的movable-area也是原生组件因此相互影响就很小了，不像方法2里面自定义手势，不一样方向去滚动效果就很惨烈。固然这里说的是影响小，并非没有，不过在不是特别剧烈的操做下，效果基本是ok的(ps:2019-07-16日更新中, 修复了剧烈操做时候的闪动问题,如今的体验更加丝滑了～～)。

• 上拉加载和下拉刷新组件源代码 

 

整合组件(swipe-list)

到这里整个功能只差组合了。咱们把上面写的tab，scroll引入到须要使用的页面，在scroll外面套个swiper，而后循环渲染分类列表来展现每个swiper-item。这里咱们须要手动监听swiper的bindchange事件，以实现tab和swiper切换的联动。因为这里实现关联比较多，暂时没有办法把swipe-list抽离成一个单独的组件。下面我直接贴上源代码地址，你们能够自由使用和修改。

• swipe-list源代码　　　

原文出处：https://www.cnblogs.com/haha1212/p/11184595.html