react 用组件库快速实现轮播图，猛练自然强

react轮播图实现

1.用到的组件库是 react-vant
网址链接: react-vant

通过 npm 安装

npm i react-vant

通过 yarn 安装

yarn add react-vant

2.找到swiper轮播

用它的图片懒加载

图片列表
总结：1.引入组件
2.图片列表，返回一个数组，可以返回地址，也可以返回本地地址，用es6的模块化引入

像这样引入图片本地的图片返回也是可以的

import ad1 from './imgs/ad1.png'
import dg2 from './imgs/dg2.png'
import lb1 from './imgs/lb1.png'
import lb2 from './imgs/lb2.png'
import lb3 from './imgs/lb3.png'

export const images=[
    ad1,dg2,lb1,lb2,lb3
]

3.如果让图片自己动起来，组件库中有方法 让自己轮播

// An highlighted block
      <div className="demo-swiper">
        <Swiper autoplay={2000}>
          {images.map((image) => (
            <Swiper.Item key={image}>
              <Image lazyload src={image} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>

<Swiper autoplay={2000}
autoplay属性 默认是false，给它设置一个值即可

在轮播板块下面有很多的设置api，可以进行参考，最基本的轮播图就实现了