Carousel 轮播组件使用介绍

安装

npm install react-mobile-carousel --save-dev

引入

import Carousel from 'react-mobile-carousel';

参数：

data （array）（必填）:

轮播图请求下来的数据，其中src参数是必填项，是轮播图的图片地址。

示例：

let data = [
      {
        "src":"http://dcloud.io/hellomui/images/muwu.jpg",
        "id":'6',
        "url":"http://localhost:8080/#/button"
      },
      {
        "src":"http://dcloud.io/hellomui/images/shuijiao.jpg",
        "id":'3',
        "url":"https://www.baidu.com"
      },
      {
        "src":"http://dcloud.io/hellomui/images/cbd.jpg",
        "id":"4",
        "url":"http://localhost:8080/#/button"
      }
    ];

link （string）（必填）：

根据所传参数进行href的拼接，数据类型string

示例 ：

link='[url]/[id]' //router中的id传递

link='[url]?id=[id]' //普通url中的id传递

上述示例中，组件会将传入的data中的id以及url拼接起来。语法规则：使用'[]'将参数括起来，'[]'中的参数会被data中的对应参数内容替换。链接中的连接符号如：'/'由用户自己定义写在'[]'参数之间。

dots （bool）：

显示控制点，默认为true

autoplay（bool）：

自动播放，默认为true

infinite（bool）：

是否循环，默认为true

speed（number）：

动画速度，默认500

fade（bool）：

淡入淡出，默认false

clickInto（bool）：

点击是否跳转链接，默认为true

click （func）：

点击事件，当clickInto设置为false时配置。事件回传三个参数。

1、点击的那张图的index；
2、拼接后的链接href；
3、点击事件event。

示例：

<Carousel data={data} autoplay link='[url]/[id]' click={this.handleItemClick}/>

handleItemClick(index,href,event) {
    console.log(href);
}