antd mobile走马灯填坑记录

说起antd mobile，会不禁联想到antd的PC端，想必移动端应该一样配置众多特效丰富（圣诞雪花）。

但是往往事与愿违，antd mobile是很拉胯的，如果不是考虑从PC端过度到移动端比较平滑，这往往不是一个好的选择，起码不是最优选择。

吐槽

当你在电脑端打开文档，看到配置，嗯，还可以，但是好像比PC端少了……大约60%的功能？当继续仔细看的时候，旁边贴心出现了手机模拟界面，但是一众功能都要用移动方式打开才能看到，就会感觉情况不妙。

不光是这些不便和功能阉割，起码一眼知道不能这么搞。但是很多地方一笔带过的字段描述，也同样让人很迷惑。

今天遇到的问题，和上面描述的都不一样。它来自一个不常用的组件—走马灯（carousel），诉求是希望实现整屏滚动操作。

当你按文档设置了竖屏滚动之后，基本能实现功能，但是更进一步的操作，在15个参数里可能就没办法实现了，比如：第一屏和最后一屏不允许滚动。

解决问题

首先想到的是，既然antd-mobile是开源的，那我本地化这个插件，手动增强一下功能总可以吧。于是打开发现它也只是拿nuka-carousel改了一下，npm首页这么描述的：

Modify from upstream nuka-carousel@2.0.4

Search for by warmhug comments in source file to see detailed changes. This fork stream’s version begin from 2.2.0 and the npm package name is rmc-nuka-carousel.

• add swipeSpeed prop, you can configure the swipe sensitivity.
• add resetAutoplay props, when set false, you can remove the sense of frustration between the items to switch.（自动循环播放时、第一个和第二个项目之间切换时的顿挫感） Note: if you set autoplayInterval prop to less than 1000, You need to set the speed prop to less than 300 at the same time.

总之是加了俩参数（swipeSpeed和resetAutoplay），至于怎么加的，抱歉没放出来，只能从源码里找。

打开nuka-carousel@2.0.4，发现这个版本还不支持顶部和底部禁止滑动的功能，于是手动安装了个最新版本的，跑一下，可以了。

其他需要扩展的功能，比如antd新增的swipeSpeed，可以自己扩展：

比如在antd里可以找到：

// rmc-carousel carousel.js #L571
  if (React.Children.count(this.props.children) > 1 && this.touchObject.length > this.state.slideWidth / slidesToShow / swipeSpeed) {

同样，原始插件里：

// https://github.com/FormidableLabs/nuka-carousel/blob/28e60e7937a3dbd875bf4edbbd6777edeccdc005/src/index.js#L556

    // touchLength must be longer than 1/5 the slideWidth / slidesToShow
    // for swiping to be initiated
    if (touchLength > this.state.slideWidth / slidesToShow / 5) {
      if (this.touchObject.direction === 1) {

加工一下即可。