antd Carousel组件实现轮播

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

内容介绍

Carousel走马灯往往被用来实现多张图片的轮播。同时，它的切换时的动态效果还是比较精美的，我们可以拿来实现小区域内容的切换。但是官方提供的案例中，轮播图的切换按钮在最下面，只能定位到指定的第几张图片，效果并不能满足我们的需求。而且虽然他给出了next()（切换到下一面板）、prev() （切换到上一面板）这两个api，但是并没有使用案例。

这里我们就来使用讲讲next()、prev()的使用，并且加入一些功能。

实现步骤

引入

引入Carousel，并使用。

import {  Carousel,Button} from 'antd';

创建实例

使用ref来绑定走马灯对象。这样做的目的是，可以在组件内的其他地方获取到走马灯实例对象，通过this.slider。

我们还加入了两个按钮来实现面板的切换，模拟的场景是登录和注册的功能页面。

 <Carousel
           afterChange={this.onChange}
           ref={(el) => (this.slider = el)}
>
                  <div key={1}>
                        <Button
                          type="text"
                          onClick={this.prev}
                            >
                              登录
                         </Button>
                  </div>
                  <div key={2}>
                            <Button
                              onClick={this.next}
                              type="text"
                            >
                              注册
                            </Button>
                  </div>
                </Carousel>

创建函数

在函数中，直接就可以获取到this.slider，也就是走马灯实例。可以直接对他使用next()、prev()，就能实现轮播的效果。

next() {
    #console.log('后一个');
    this.slider.next();
  }
  prev() {
    #console.log('前一个');
    this.slider.prev();
  }

总结

通过ref和两个api，即可成功的实现按钮手动切换的效果。 同样的，仿照这个方法，我们还能将切换按钮做成其他的样式的。例如下图，将按钮固定在两边：

此外，使用Carousel组件还可以实现数据列表的轮播，例如下图：