pc-swiper

一个使用rxjs做交互流程管理的swiper, 适用于preact项目, hooks编写, 有如下特性

1. 横向/纵向滚动
2. tab页面懒初始化
3. 溢出动画
4. 支持嵌套([横|纵]嵌[横|纵])+
5. 体积相对较小(压缩后26.6k, swiper.min.js则有124.9k)

Live Demo

Link

Props

| 参数 | 类型 | 默认值 | 描述 | | -------------- | --------- | ------------------------ | ------------------------ | | index | number | 0 | 默认参数 | | pool | number | 3 | 初始化距离当前tab范围 | | threshold | number | 0.13 | 滑动到下一页阈值 | | direction | Direction | Direction.horizontal | 方向 | | swipeableRange | Array | [0, children.length - 1] | 可滚动范围, 用于条件滚动 | | overflow | boolean | false | 溢出回弹 | | maxOverflow | number | 25 | 最大可以出px | | flingDuration | number | 800 | 手指离开屏幕后动画时长 | | flingEaseFn | Function | easeOutQuint | fling缓动函数 | | className | string | | swiper根元素className |

建议一下props更新通过拿ref更新, 比如: swiperRef.current.swipeableRange = [0, 1]

Events

| 事件名 | 参数 | 描述 | | ---------- | ------------ | ------------------------------------------------------ | | onProgress | ProgressInfo | 有位移/进度变化时触发 | | onSwipeEnd | Info | 当手指离开屏幕触发 | | onFlingEnd | Info | 当惯性滚动结束后触发 | | onOverflow | OverflowInfo | 当手指离开屏幕且触发溢出时触发, 前置条件overflow: true |

Event Params: ProgressInfo

| 参数 | 类型 | 描述 | | ------- | ------ | ----------------- | | tab | number | 当前tab | | percent | number | 距离目标tab百分比 |

Event Params: Info

| 参数 | 类型 | 描述 | | ---- | ------ | ------- | | tab | number | 当前tab |

Event Params: OverflowInfo

| 参数 | 类型 | 描述 | | ------------ | --------- | -------- | | overflowEdge | Direction | 溢出方向 |

VM Public Methods

| 方法 | 参数 | 描述 | | ---- | ------------- | ------------- | | goto | index(number) | 跳转到目标tab |

Demo Code

function Page() {
  return <div>
    <Swiper>
      <SwiperItem>1</SwiperItem>
      <SwiperItem>2</SwiperItem>
      <SwiperItem>3</SwiperItem>
    </Swiper>
  </div>
}

TODO

1. 滑动增益(win8.1 应用菜单所应用肉眼减少触控延迟的方法, 提高跟手感觉)
2. 横向滚动高度自适应(TBD, 可以通过onSwipe API可以实现, 只是一些初始化样式数据需要自己维护)
3. 溢出加载更多
4. 支持循环
5. 支持多页滑动, 而非仅仅单页
6. 溢出回弹可自定义
7. 支持PC

License

MIT 造轮子锻炼抽象能力