rt-slide

Slide

属性列表

属性名	类型	默认值	作用说明
defaultActiveIndex	number	0	默认显示的slide的序号，从0开始
className	string	无	自定义类名
style	object	无	自定义行内样式
preSlide	function ({ activeIndex }){}	无	在滑动最开始时调用
afterSlide	function ({ activeIndex }){}	无	在滚动完成后调用(具体时机在于transitionEnd触发)
slideFeedback	bool	true	是否开启滑动反馈，这个需要配合slideFeedbackTransformLimit
slideFeedbackTransformLimit	number	80，单位为px	触发滑动反馈的上限值
transformLimit	number	50，单位为px	滑动的安全区域值，一旦滑动超过这个值则会滑到下一个或者上一个slide
children	SlideItem类型	必需，无默认值	单个slide item元素
layout	'horizontal'或者'vertical'	'horizontal'	slide的滚动方向
infinite	bool	false	是否开启无限滚动
autoSlide	bool	false	是否开启自动轮播；开启了该设置会强制无限滚动
timeGap	number	1000，单位ms	自动轮播间隔时间
animation	string	'cubic-bezier(0.645, 0.045, 0.355, 1)'	贝塞尔曲线函数字符串

使用

        <div style={{
          width: 300,
          height: 300,
          marginLeft: 'auto',
          marginRight: 'auto'
        }}>
          <Slide layout={'vertical'} defaultActiveIndex={1} className={''} style={{}} slideFeedback={true} preSlide={function ( { activeIndex } ) {
            console.log('滑动开始:当前的slide序号', activeIndex)
          }} afterSlide={function ({ activeIndex } ) {
            console.log('滑动结束:当前的slide序号', activeIndex);
          }}>
            <SlideItem className={ 'slide-0' }>
              <div className="slide-0-content">测试文字内容</div>
            </SlideItem>
            <SlideItem className={ 'slide-1'}>
              <div className="slide-1-content" >测试文字内容</div>
            </SlideItem>
            <SlideItem style={{backgroundColor:'black'}} className={'slide-2'}>
              <div className="slide-2-content">测试文字内容</div>
            </SlideItem>
          </Slide>
        </div>

Slide的宽度和高度由包裹它的元素决定，所以请对其包裹元素设置适当的宽高

Slide.Item

属性名	类型	默认值	作用说明
classNames	string	无	自定义类名
style	object	无	自定义行内样式
width	number	继承Slide的宽度，单位px	设置Slide.Item的宽度
height	number	继承Slide的高度，单位px	设置Slide.Item的高度
children	any或React.node	无	渲染的内容