1.10.3 • Published 3 years ago
image-scroll-youku v1.10.3
模仿优酷小轮播图组件
📦 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 |