0.0.1 • Published 5 years ago

sinobest-rc-image-show v0.0.1

Weekly downloads
6
License
private
Repository
-
Last release
5 years ago

sinobest-rc-image-show

图片展示模块,包括区域图片滑动轮播模式或瀑布流模式。

Install

yarn add sinobest-rc-image-show

Use

import React, { Component } from 'react';
import { SinoImageShow } from 'sinobest-rc-image-show';

export default class ImageShowDemo extends Component {
  render() {
    const data = [
      {
        name: '图1',
        path: 'xxxx.png'
      },
      {
        name: '图2',
        path: 'xxxx.png'
      },
      {
        name: '图3',
        path: 'xxxx.png'
      }, {
        name: '图4',
        path: 'xxxx.png'
      }
    ];

    return (
      <div>
        <SinoImageShow mode='slider' data={data} width={700} height={500} slidesToShow={1} slidesToScroll={1} />
      </div>
    );
  }
}

API

参数说明类型默认值
mode图片展示模式,可选区域图片滑动轮播模式slider或瀑布流模式waterfallString'slider'
data图片数据Array-
fullscreenView是否开启图片点击全屏查看功能Booleantrue
width容器宽度,只支持slider模式Number600
height容器高度,只支持slider模式Number400
lazyLoad是否开启懒加载,暂时只支持slider模式Booleantrue
arrows显示箭头,只支持slider模式Booleantrue
draggable开启拖拽,只支持slider模式Booleanfalse
infinite图片无限循环,只支持slider模式Booleanfalse
speed图片切换动画时间(毫秒),只支持slider模式Number500
slidesToShow区域图片展示数量,只支持slider模式Number1
slidesToScroll单次图片切换数量,只支持slider模式Number1
autoplay开启自动轮播,只支持slider模式Booleanfalse
autoplaySpeed自动轮播速度(毫秒),只支持slider模式Number3000
pauseOnHover自动播放开启时,鼠标停留在图片时暂停自动轮播,只支持slider模式Booleanfalse