0.1.1 • Published 5 years ago
react-swipeable-tab v0.1.1
react-swipeable-tab
一个可滑动切换,异步加载数据,具有流畅滚动特性的 React-Tab 组件
参考了react-tabtab提供的组件,在此基础上进行了功能特性的丰富
Demo
使用
install
npm i react-swipeable-tab --save
import
import { Tab, Tabs, TabList, PanelList, Panel, AsyncPanel } from "react-swipeable-tab";
Simple Tab
一个简单用法的 tab
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 (
<Tabs activeIndex={tab1_activeIndex} onTabChange={this.onTab1_Change}>
<TabList style={{ height: "40px" }}>
<Tab>tab1</Tab>
<Tab>tab2</Tab>
<Tab>tab3</Tab>
</TabList>
<PanelList style={{ height: "100px" }}>
<Panel>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
</Panel>
<Panel>content2</Panel>
<Panel>content3</Panel>
</PanelList>
</Tabs>
);
}
}
Multipe Tab
多 tab 导航栏
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 (
<Tabs
activeIndex={tab2_activeIndex}
onTabChange={this.onTab2_Change}
page={5}
>
<TabList style={{ height: "40px" }}>
<Tab>tab1</Tab>
<Tab>tab2</Tab>
<Tab>tab3</Tab>
<Tab>tab4</Tab>
<Tab>tab5</Tab>
<Tab>tab6</Tab>
<Tab>tab7</Tab>
<Tab>tab8</Tab>
<Tab>tab9</Tab>
</TabList>
<PanelList style={{ height: "100px" }}>
<Panel>content1</Panel>
<Panel>content2</Panel>
<Panel>content3</Panel>
<Panel>content4</Panel>
<Panel>content5</Panel>
<Panel>content6</Panel>
<Panel>content7</Panel>
<Panel>content8</Panel>
<Panel>content9</Panel>
</PanelList>
</Tabs>
);
}
}
AnimateHeight Tab
自动调整高度伸缩 tab
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 (
<Tabs
animateHeight={true}
activeIndex={tab3_activeIndex}
onTabChange={this.onTab3_Change}
>
<TabList style={{ height: "40px" }}>
<Tab>tab1</Tab>
<Tab>tab2</Tab>
<Tab>tab3</Tab>
</TabList>
<PanelList style={{ height: "50px" }}>
<Panel minPanelHeight={"50px"} style={{ height: "50px" }}>
content1
</Panel>
<Panel minPanelHeight={"150px"} style={{ height: "100px" }}>
content1
</Panel>
<Panel minPanelHeight={"350px"} style={{ height: "150px" }}>
content1
</Panel>
</PanelList>
</Tabs>
);
}
}
Async Loading Tab
异步加载内容 tab
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 (
<Tabs activeIndex={tab4_activeIndex} onTabChange={this.onTab4_Change}>
<TabList style={{ height: "40px" }}>
<Tab>tab1</Tab>
<Tab>tab2</Tab>
<Tab>tab3</Tab>
</TabList>
<PanelList style={{ height: "100px" }}>
<AsyncPanel
loadContent={this.loadingConetent}
render={data => <div>{data}</div>}
renderLoading={() => <div>loading...</div>}
/>
<AsyncPanel
loadContent={this.loadingConetent}
render={data => <div>{data}</div>}
renderLoading={() => <div>loading...</div>}
/>
<AsyncPanel
loadContent={this.loadingConetent}
render={data => <div>{data}</div>}
renderLoading={() => <div>loading...</div>}
/>
</PanelList>
</Tabs>
);
}
}
API
<Tabs />
<TabList />
用来包裹 <Tab /> 组件
<Tab />
顶部 tab 导航栏面板
<PanelList />
用来包裹 <Panel /> 组件
<Panel />
内容面板
<AsyncPanel />
具有异步加载数据功能的内容面板