Image-scroll-youku NPM

模仿优酷小轮播图组件

📦 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

轮播图，优酷轮播组件，仿优酷轮播组件UI

father-build prop-types ts-loader url-loader

@everything-registry/sub-chunk-1903 @zalastax/nolb-image-@infinitebrahmanuniverse/nolb-image-

4 years ago

4 years ago

4 years ago

4 years ago