open-library/src/ImageScrollYouKu/index.md

开放组件库

### 默认

```tsx
import React from 'react';
import { ImageScrollYouKu } from 'open-library';

const data = [
  {
    imgUrl:
      'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字简短描述文字简短描述文字简短描述文字',
  },

  {
    imgUrl:
      'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
];

export default () => <ImageScrollYouKu imgList={data} />;
```

### 设置图片间隔

```tsx
import React from 'react';
import { ImageScrollYouKu } from 'open-library';

const data = [
  {
    imgUrl:
      'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  },
];

export default () => <ImageScrollYouKu imgList={data} space={20} />;
```

### 添加标题描述

```tsx
import React from 'react';
import { ImageScrollYouKu } from 'open-library';

const data = [
  {
    imgUrl:
      'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字简短描述文字简短描述文字简短描述文字',
  },

  {
    imgUrl:
      'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
];

export default () => <ImageScrollYouKu imgList={data} showText={true} />;
```

### 每次滚动张数

```tsx
import React from 'react';
import { ImageScrollYouKu } from 'open-library';

const data = [
  {
    imgUrl:
      'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字简短描述文字简短描述文字简短描述文字',
  },

  {
    imgUrl:
      'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
  {
    imgUrl:
      'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    name: '图片名称',
    desc: '简短描述文字',
  },
];

export default () => <ImageScrollYouKu imgList={data} scrollImageNumber={2} />;
```

### API `该组件预废弃，但可使用`

`参数说明`

| 参数              | 说明                                           | 必填 | 默认值      | 类型               |
| ----------------- | ---------------------------------------------- | ---- | ----------- | ------------------ |
| imgList           | 图片列表数据                                   | 是   | -           | array              |
| number            | 默认可见的图片张数                             | 否   | 4           | number             |
| scrollImageNumber | 每次滚动张数                                   | 否   | 4           | number             |
| width             | 整个组件宽度                                   | 否   | 800         | number             |
| imageHeight       | 图片高度                                       | 否   | 200         | number             |
| space             | 图片间隔宽度                                   | 否   | 1%          | number 或者 string |
| showText          | 展示描述文字                                   | 否   | false       | boole              |
| className         | 组件 className                                 | 否   | -           | string             |
| style             | 组件样式                                       | 否   | -           | object             |
| easing            | 动画效果                                       | 否   | ease-in-out | string             |
| animationBuffer   | 缓冲动画,网络慢时候加载图片的动画效果，默认 3s | 否   | false       | boole              |

`方法`

| 参数    | 说明                 |
| ------- | -------------------- |
| onClick | 点击图片事件         |
| prev    | 点击切换上一面板事件 |
| next    | 点击切换下一面板事件 |