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 />

属性	类型	默认值	说明
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	加载后是否缓存数据