react-swipeable-tab

一个可滑动切换，异步加载数据，具有流畅滚动特性的 React-Tab 组件

参考了react-tabtab提供的组件，在此基础上进行了功能特性的丰富

Demo

使用

install

``bash
npm i react-swipeable-tab --save
`

import

`js
import { Tab, Tabs, TabList, PanelList, Panel, AsyncPanel } from "react-swipeable-tab";
`

$3

一个简单用法的 tab

![](/assets/simple-tab.gif)

`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

`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 (
activeIndex={tab2_activeIndex}
onTabChange={this.onTab2_Change}
page={5}
>

tab1
tab2
tab3
tab4
tab5
tab6
tab7
tab8
tab9


content1
content2
content3
content4
content5
content6
content7
content8
content9


);
}
}
`

$3

自动调整高度伸缩 tab

![](/assets/animateHeight-tab.gif)

`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 (
animateHeight={true}
activeIndex={tab3_activeIndex}
onTabChange={this.onTab3_Change}
>

tab1
tab2
tab3



content1


content1


content1



);
}
}
`

$3

异步加载内容 tab

![](/assets/async-tab.gif)

`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


loadContent={this.loadingConetent}
render={data =>

API

$3

$3

用来包裹 <Tab /> 组件

$3

顶部 tab 导航栏面板

$3

用来包裹 <Panel /> 组件

$3

内容面板

$3

具有异步加载数据功能的内容面板