react-s-scrollable-tab-view
这是一个基于JavaScript原生实现的react组件,实现了滚动tabbar,滑动切换页面
安装
npm install react-s-scrollable-tab-view
使用
; { return <ScrollableTabBarView handleTab=thishandleTab renderTabBar= <ScrollableTabBar/>> <div tabLabel='title1' >content1</div> <div tabLabel='title2' >content2</div> <div tabLabel='title3' >content3</div> <div tabLabel='title4' >content4</div> <div tabLabel='title5' >content5</div> <div tabLabel='title6' >content6</div> </ScrollableTabBarView> }
介绍
组件自带两种tabbar:1.ScrollableTabBar2.DefaultTabBar同学们可自行选择合适的tabbar,也可自定义tabbar
属性
属性 | 值类型 | 默认值 | 描述 |
---|---|---|---|
initItemIndex | number | 0 | 初始化显示页面的下标 |
underlineStyle | object | 无 | tabbar下划线样式 |
textStyle | object | 无 | tabbar文字样式 |
activeTextColor | string | #333 | tabbar选中时文字高亮颜色 |
renderTabBar | any | DefaultTabBar | 自定义tabbar |
handleTab | func | 无 | 页面切换回调 |
内置组件(Carousel, ScrollView)
1.Carousel
;const windows = width: windowinnerWidth height: windowinnerHeight; { return <Carousel className=styleshcarousel> <div className=stylescarouselItem style=width: windowswidth backgroundColor: '#000'/> <div className=stylescarouselItem style=width: windowswidth backgroundColor: 'red'/> <div className=stylescarouselItem style=width: windowswidth backgroundColor: 'yellow'/> </Carousel> }
属性
属性 | 值类型 | 默认值 | 描述 |
---|---|---|---|
initItem | number | 0 | 初始化显示页面的下标 |
loop | bool | true | 是否循环滚动 |
auto | bool | true | 是否自动滚动 |
autoplayTime | number | 3000 | 自动滚动间隔 |
indicator | bool | true | 是否显示指示器 |
indicatorStyle | object | 默认样式 | 指示器样式 |
indicatorDef | any | 默认 | 自定义指示器布局 |
indicatorActive | any | 默认 | 自定义选中指示器布局 |
bounce | bool | false | 切换页面是否具有回弹效果 |
pageScrollEnd | func | 无 | 页面切换完成回调 |
itemCls | string | 无 | item class |
itemStyle | object | 无 | item 样式 |
2.ScrollView
;const windows = width: windowinnerWidth height: windowinnerHeight; { return <ScrollView> <div className=stylescarouselItem style=backgroundColor: '#000'/> <div className=stylescarouselItem style=backgroundColor: 'red'/> <div className=stylescarouselItem style=backgroundColor: 'yellow'/> <div className=stylescarouselItem style=backgroundColor: '#000'/> <div className=stylescarouselItem style=backgroundColor: 'red'/> <div className=stylescarouselItem style=backgroundColor: 'yellow'/> <div className=stylescarouselItem style=backgroundColor: '#000'/> <div className=stylescarouselItem style=backgroundColor: 'red'/> <div className=stylescarouselItem style=backgroundColor: 'yellow'/> </ScrollView> }
属性
属性 | 值类型 | 默认值 | 描述 |
---|---|---|---|
startY | number | 0 | 纵向初始化位置 |
startX | number | 0 | 横向初始化位置 |
horizontal | bool | false | 是否横向显示布局,默认纵向显示 |
bounce | bool | false | 滑动至顶/底部是否具有回弹效果 |
onScroll | func | 无 | 滑动回调 |
onScrollEnd | func | 无 | 滑动结束回调 |