imgSlider

照片浏览组件
提供的UI展示属性接口如下

  • imgList:需要展示的图片数组，每个图片用一个对象来表示
    例如 
    
                [{
                      profile:'1叔2015上传',
                      url:'http://img5.imgtn.bdimg.com/it/u=1478257864,2882073929&fm=21&gp=0.jpg',
                      description:'闪惠商户培训资料',
                      thumbnail:'http://img0.imgtn.bdimg.com/it/u=1649172259,4185796887&fm=21&gp=0.jpg'
                   }]
  • show:是否显示照片浏览组件，默认隐藏，需要手动设置为true才可以显示照片浏览组件 默认false
  • urlKey:定义大图的‘图片路径’应该取自图像object的哪一个属性。
    在上述imgList中，图像object的url属性就是大图路径，所以urlKey='url'
  • titleKey:定义大图‘左下方文字描述’应该取自图像object的哪一个属性。
    在上述imgList中，图像object的description属性就是图片描述，所以titleKey='description'
  • profileKey:定义大图‘正下方profile描述’应该取自图像object的哪一个属性。
    在上述imgList中，图像object的profile属性就是图片profile，所以profileKey='profile'
  • thumbnailKey:定义缩略图对应imgList数组的key 默认和urlKey保持一致,本例中就是thumbnail
  • showThumbnail:定义是否展示缩略图 默认true
  • pageNum:定义每页缩略图的个数 默认为5
  • imgModify:是否对图片进行放大缩小等操作 默认为false
使用方式: 
<imgSlider show={true} showThumbnail={true}
 imgList={imgList}
 profileKey={'profile'}
 urlKey={'url'}
 titleKey={'description'}
 thumbnailKey={thumbnailKey} />

属性

属性名类型说明默认值
imgList Array

slider的图片数组

 图片数组(包含大图地址、描述等信息)
imgModify Boolean

控制缩放旋转控件的显示，默认隐藏

 false
pageNum Number

缩略图展示数目

 5
profileKey String

图片信息(对应图片信息数组对象中图片描述信息的key)

 profile
show Boolean

是否展示slider

 false(默认不展示)
showThumbnail Boolean

是否显示slider的图片缩略图部分

 true
thumbnailKey Array

缩略图的key

 默认和urlKey保持一致
titleKey String

图片描述信息(对应imgList中大图标题信息的key)

 description
urlKey String

图片信息(对应imgList中大图标题信息的key))

 url

示例展示: