antd mobile走马灯填坑记录

September 20, 2021 ... ☕️ 2 min read

说起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) {

加工一下即可。

#react#antd

SideEffect is a blog for front-end web development.
Code by Axiu / rss