轮播图踩坑总结

·  阅读 237
轮播图踩坑总结

1 antd-mobile 轮播图

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

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

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

image.png

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

以下是轮播图的代码

<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 是相同的值,所以点击跳转之后,不再轮播,卡在那里不动。

image.png

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

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

image.png

分类:
前端
标签: