cr-scrollgallery

react component

Example

Usage

``jsx
cnpm install --save cr-scrollgallery
`

`js
import ScrollGallery from 'cr-scrollgallery'
import 'cr-scrollgallery/assets/index.css'
// 注意在使用的时候不能忘记引入css
// 如果使用cssModule，不需要在此处引入css，而是在对应的less或scss文件引入，查看注意01
render () {
const galleryTop = (


)
const arrayElement = () => {
const one = (

tab一

)
const two = (

tab二

)
const three = (

tab三

)

return [one, two, three]
}

return (

barTab={['tab一', 'tab二', 'tab三']}
tabSelect={3}
galleryTop={galleryTop}
galleryElements={arrayElement()}
/>

)
}

`

注意01


如果使用了cssModule，作为样式的使用方式，在引入css时应特别注意
以And Design Pro使用为例，在对应的页面less中引入css。注意包名前面的波浪线
`less
@import '~cr-scrollgallery/assets/index.css';
`

注意02

如果组件传入的是异步元素，因为组件在componentDidMount时计算元素的高度导致不准确，因此组件增加了修补措施，在异步完成是调用方法this.gallery.setInitScrollNum()
2019-06-14已修复，一般状态下不需要手动触发修补措施
如何使用：
`js
promise.then(() => {
this.gallery.setInitScrollNum()
})
this.gallery = gallery }>
`

API

name | type | description
-----|------|------------
barTab|array|标题tab
tabSelect|number|默认选中的tab,并且滚动到相应位置
galleryTop|react node|tab bar上部内容
galleryElements|array of react node|tab对应的页面内容
barMinWidth|string/number|设置tabBar最小宽度，合适的值可以使tabBar居中 (例如：500,'500px','85%')
outBoxHeight|number|设置外层 scroll div 高度，默认600

Development

`
cnpm install
npm start
``

Example

http://localhost:8020/examples/testOne.html

License

cr-scrollgallery is released under the MIT license.