模仿优酷小轮播图组件

📦 Install

npm i image-scroll-youku

🙂 Use

import ImagescrollYK from 'image-scroll-youku'

<ImagescrollYK imgList = [] / >

参数说明

| 字段 | 说明 | 必填 | 默认值 |类型 | | ---- | ---- | ---- | ---- | ---- | | onClick | 点击图片事件 |否 |- |function | | clickLeft | 点击左边的icon事件 |否 |- |function | | clickRight | 点击右边的icon事件 |否 |- |function | | imgList | 图片列表数据 |是 |- | array| | number | 滚动区域可见的图片个数 |否 | 4 | number| | width | 整个组件宽度 |否 | 800 | number| | imageHeight | 图片高度 |否 | 200 | number| | space | 图片间隔宽度 |否 | 1% | number 或者 string| | showText | 展示描述文字 |否 | true | boole| | className | 样式 |否 |- |object | | style | 样式 |否 |- | object|

imgList 的数据格式

imgList = [
    {
        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: '简短描述文字'
    },
]

todo

| 表头 | 说明 | 必填 | 默认值 |类型 | | ---- | ---- | ---- | ---- | ---- | | rightReactNode | 自定义右侧点击按钮节点 |否 |- | ReactNode| | leftReactNode | 自定义左侧点击按钮节点 |否 |- | ReactNode|