gallery

图片轮播

Simple Usage

var images = [{
    src: 'https://gw.alicdn.com/tps/TB1CO7CJpXXXXbQXpXXXXXXXXXX-690-431.jpg',
    name: '图片一',
    href: 'http://domain.html'
},
{
    src: 'https://gw.alicdn.com/tps/TB1ZfsHJpXXXXchXXXXXXXXXXXX-640-387.jpg',
    name: '图片二图片二图片二图片二图片二图片二图片二图片二图片二图片二图片二图片二',
    href: 'http://domain.html'
},
{
    src: 'https://gw.alicdn.com/tps/TB1iXo1JpXXXXbiXpXXXXXXXXXX-640-340.jpg',
    name: '图片三',
    href: 'http://domain.html'
},
{
    src: 'https://gw.alicdn.com/tps/TB1mRFvJXXXXXbPXpXXXXXXXXXX-640-340.jpg',
    name: '图片一',
    href: 'http://domain.html'
},
{
    src: 'https://gw.alicdn.com/tps/TB1HMQVJpXXXXbZXpXXXXXXXXXX-640-340.jpg',
    name: '图片一',
    href: 'http://domain.html'
},
{
    src: 'https://gw.alicdn.com/tps/TB1X.oFJpXXXXbMXVXXXXXXXXXX-484-282.png',
    name: '图片一',
    href: 'http://domain.html'
},
{
    src: 'https://gw.alicdn.com/tps/TB1E2M9JpXXXXXQXXXXXXXXXXXX-820-356.png',
    name: '图片一',
    href: 'http://domain.html'
},
{
    src: 'https://gw.alicdn.com/tps/TB1Qy3RJpXXXXcxXFXXXXXXXXXX-2000-680.jpg',
    name: '图片一',
    href: 'http://domain.html'
}];

<Gallery images={this.state.images}
    lazyLoad={false}
    showNav={true}/>

Props

与 slide 的参数一致，此外还有两个额外参数：

images

• 描述：要显示的图片数据，请参考上面的demo
• 类型：Array
• 默认：null
• 必选：是

示例：

<Gallery images={images} showNav={true}/>

lazyLoad

• 描述：是否启用懒加载，懒加载策略是会预先加载当前显示的图片及该张图片的前后两张
• 类型：Boolean
• 默认：true
• 必选：否

示例：

<Gallery images={images} lazyLoad={true} showNav={true}/>