轮播图踩坑总结

1 antd-mobile 轮播图

移动端需求：加入轮播图，可自动播放，每张轮播图可点击跳转。看到项目中引入了 「antd-mobile」，也是本人第一次使用 「antd-mobile」，那就引入了「antd-mobile」自带的Carousel 走马灯组件。好家伙，竟然有问题，如有大佬遇到同样问题，可交流解决办法。

移动端项目中引入了 「antd-mobile」

打开 github.com/ant-design/… 已经很久没有人维护了，issues 目前还有578个。

问题描述：点击轮播图跳转链接，返回之后轮播图卡主不动

以下是轮播图的代码

<Carousel
  autoplay
  autoplayInterval={5000}
  infinite
  swipeSpeed={100}
  dotStyle={dotStyle}
  dotActiveStyle={dotActiveStyle}
>
  {this.props.brandsList.map(item => this.renderItem(item))}
</Carousel>

bannerItemClick = link => {
  // 跳转到指定链接
}

renderItem = item => {
  return (
    <div
      onClick={() => this.bannerItemClick(item.targetUrl, height)}
      key={item.targetUrl}
    >
      <img
        src={item.imageUrl}
      />
    </div>
  )
}
复制代码

分析原因，打印了 beforeChange 函数，切换之后回来，form 与 to 是相同的值，所以点击跳转之后，不再轮播，卡在那里不动。

2 react-swipeable-views 替换 antd-mobile 内置轮播图

react-swipeable-views 引入方式为高阶函数的方式，react-swipeable-views.com/getting-sta…