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…