一个可滑动切换,异步加载数据,具有流畅滚动特性的 React-Tab 组件
一个可滑动切换,异步加载数据,具有流畅滚动特性的 React-Tab 组件
参考了react-tabtab提供的组件,在此基础上进行了功能特性的丰富
install
``bash`
npm i react-swipeable-tab --save
import
`js`
import { Tab, Tabs, TabList, PanelList, Panel, AsyncPanel } from "react-swipeable-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() { content1 content1 content1 content1 content1 content1 content1 content1
const { tab1_activeIndex } = this.state;
return (
);
}
}
`
多 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 (
onTabChange={this.onTab2_Change}
page={5}
>
);
}
}
`
自动调整高度伸缩 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 (
activeIndex={tab3_activeIndex}
onTabChange={this.onTab3_Change}
>
content1
content1
content1
);
}
}
`
异步加载内容 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 (
render={data => {data}}
renderLoading={() => loading...}
/>
render={data => {data}}
renderLoading={() => loading...}
/>
render={data => {data}}
renderLoading={() => loading...}
/>
);
}
}
``
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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导航面板 |
用来包裹 <Tab /> 组件
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | null | 自定义组件样式 |
| className | string | null | 设置添加样式类名 |
顶部 tab 导航栏面板
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | null | 自定义组件样式 |
| className | string | null | 设置添加样式类名 |
用来包裹 <Panel /> 组件
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | null | 自定义组件样式 |
| className | string | null | 设置添加样式类名 |
内容面板
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | null | 自定义组件样式 |
| className | string | null | 设置添加样式类名 |
| panelIscrollOptions | object | | iscroll组件配置 |
具有异步加载数据功能的内容面板
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| style | object | null | 自定义组件样式 |
| className | string | null | 设置添加样式类名 |
| panelIscrollOptions | object | | iscroll组件配置 |
| loadContent | (cb) => cb(error, data)or(cb) => Promise | null | 需要异步加载数据的回调函数 |
| render | (data) => Component | null | 数据加载完成后渲染的组件 |
| renderLoading | () => Component | null | 在进行数据异步加载时填充的loading组件 |
| cache | boolean | true | 加载后是否缓存数据 |