Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lchreal6/react-swipeable-tab
a swipable and async loading tab component with iscroll
https://github.com/lchreal6/react-swipeable-tab
animation asyncloader iscroll react smooth-scrolling swipeable-tabs tabs
Last synced: 3 months ago
JSON representation
a swipable and async loading tab component with iscroll
- Host: GitHub
- URL: https://github.com/lchreal6/react-swipeable-tab
- Owner: lchreal6
- License: mit
- Created: 2019-03-21T14:29:55.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:18:01.000Z (about 2 years ago)
- Last Synced: 2024-10-24T19:42:21.620Z (3 months ago)
- Topics: animation, asyncloader, iscroll, react, smooth-scrolling, swipeable-tabs, tabs
- Language: JavaScript
- Homepage: https://lchreal6.github.io/react-swipeable-tab/build
- Size: 3.17 MB
- Stars: 9
- Watchers: 2
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-swipeable-tab
一个可滑动切换，异步加载数据，具有流畅滚动特性的 React-Tab 组件
参考了[react-tabtab](https://github.com/ctxhou/react-tabtab)提供的组件，在此基础上进行了功能特性的丰富
## [Demo](https://lchreal6.github.io/react-swipeable-tab/build)
## 使用
install
```bash
npm i react-swipeable-tab --save
```
import
```js
import { Tab, Tabs, TabList, PanelList, Panel, AsyncPanel } from "react-swipeable-tab";
```
### Simple Tab
一个简单用法的 tab
```jsx
import React, { Component } from "react";
import { Tab, Tabs, TabList, Panel, PanelList } from "react-swipeable-tab";
export default class Demo extends Component {
constructor(props) {
super(props);
this.state = {
tab1_activeIndex: 0
};
}
onTab1_Change = index => {
this.setState({
tab1_activeIndex: index
});
};
render() {
const { tab1_activeIndex } = this.state;
return (
tab1
tab2
tab3
content1
content1
content1
content1
content1
content1
content1
content1
content2
content3
);
}
}
```
### Multipe Tab
多 tab 导航栏
```jsx
import React, { Component } from "react";
import { Tab, Tabs, TabList, Panel, PanelList } from "react-swipeable-tab";
export default class Demo extends Component {
constructor(props) {
super(props);
this.state = {
tab2_activeIndex: 0
};
}
onTab2_Change = index => {
this.setState({
tab2_activeIndex: index
});
};
render() {
const { tab2_activeIndex } = this.state;
return (
tab1
tab2
tab3
tab4
tab5
tab6
tab7
tab8
tab9
content1
content2
content3
content4
content5
content6
content7
content8
content9
);
}
}
```
### AnimateHeight Tab
自动调整高度伸缩 tab
```jsx
import React, { Component } from "react";
import { Tab, Tabs, TabList, Panel, PanelList } from "react-swipeable-tab";
export default class Demo extends Component {
constructor(props) {
super(props);
this.state = {
tab3_activeIndex: 0
};
}
onTab3_Change = index => {
this.setState({
tab3_activeIndex: index
});
};
render() {
const { tab3_activeIndex } = this.state;
return (
tab1
tab2
tab3
content1
content1
content1
);
}
}
```
### Async Loading Tab
异步加载内容 tab
```jsx
import React, { Component } from "react";
import { Tab, Tabs, TabList, AsyncPanel, PanelList } from "react-swipeable-tab";
export default class Demo extends Component {
constructor(props) {
super(props);
this.state = {
tab4_activeIndex: 0
};
}
onTab4_Change = index => {
this.setState({
tab4_activeIndex: index
});
};
loadingConetent = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("content");
}, 2000);
});
};
render() {
const { tab4_activeIndex } = this.state;
return (
tab1
tab2
tab3
{data}}
renderLoading={() => loading...}
/>
{data}}
renderLoading={() => loading...}
/>
{data}}
renderLoading={() => loading...}
/>
);
}
}
```
## API
### <Tabs />
属性
类型
默认值
说明
defaultIndex
int
null
初始化tab的显示面板
activeIndex
int
null
当前激活的tab面板的key
onTabChange
() => tabIndex
null
返回被点击的面板的key
你可以使用这个方法更新面板的activeIndex，来切换tab
style
object
null
自定义组件样式
className
string
null
设置添加样式类名
swiperMove
boolean
true
是否开启滑动切换tab
animate
boolean
true
是否开启滑动切换动画特性
showInk
boolean
true
顶部tab导航栏当前激活的面板是否底部显示横线标识
inkColor
string
'#2A84F8'
顶部tab导航栏当前激活的面板底部横线颜色
activeTabColor
string
'#2A84F8'
顶部tab导航栏当前激活的面板文字颜色
panelIscroll
boolean
true
tab内容面板是否使用iscroll组件，具有iscroll滚动的特性
threshold
int
5
快速切屏的时间阈值系数
page
int
null
屏幕最多显示多少个tab导航面板
### <TabList />
用来包裹 <Tab /> 组件
属性
类型
默认值
说明
style
object
null
自定义组件样式
className
string
null
设置添加样式类名
### <Tab />
顶部 tab 导航栏面板
属性
类型
默认值
说明
style
object
null
自定义组件样式
className
string
null
设置添加样式类名
### <PanelList />
用来包裹 <Panel /> 组件
属性
类型
默认值
说明
style
object
null
自定义组件样式
className
string
null
设置添加样式类名
### <Panel />
内容面板
属性
类型
默认值
说明
style
object
null
自定义组件样式
className
string
null
设置添加样式类名
panelIscrollOptions
object
{
fadeScrollbars: true,
}
iscroll组件配置
### <AsyncPanel />
具有异步加载数据功能的内容面板
属性
类型
默认值
说明
style
object
null
自定义组件样式
className
string
null
设置添加样式类名
panelIscrollOptions
object
{
fadeScrollbars: true,
}
iscroll组件配置
loadContent
(cb) => cb(error, data)or(cb) => Promise
null
需要异步加载数据的回调函数
render
(data) => Component
null
数据加载完成后渲染的组件
renderLoading
() => Component
null
在进行数据异步加载时填充的loading组件
cache
boolean
true
加载后是否缓存数据