TabBar 标签栏

位于 APP 底部，方便用户在不同功能模块之间进行快速切换。

规则

  • 用作 APP 的一级分类，数量控制在 3-5 个之间。

  • 即使某个 Tab 不可用，也不要禁用或者移除该 Tab。

  • 使用 Badge 进行提示，足不出户也能知道有内容更新。

代码演示

APP 型选项卡

多用于页面的内容区块，起着控制小范围内的大块内容的分组和隐藏，起着保持界面整洁的作用。 

  1. import { TabBar } from 'antd-mobile';
  3. class TabBarExample extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       selectedTab: 'redTab',
  8.       hidden: false,
  9.       fullScreen: false,
  10.     };
  11.   }
  13.   renderContent(pageText) {
  14.     return (
  15.       <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
  16.         <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
  17.         <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
  18.           onClick={(e) => {
  19.             e.preventDefault();
  20.             this.setState({
  21.               hidden: !this.state.hidden,
  22.             });
  23.           }}
  24.         >
  25.           Click to show/hide tab-bar
  26.         </a>
  27.         <a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
  28.           onClick={(e) => {
  29.             e.preventDefault();
  30.             this.setState({
  31.               fullScreen: !this.state.fullScreen,
  32.             });
  33.           }}
  34.         >
  35.           Click to switch fullscreen
  36.         </a>
  37.       </div>
  38.     );
  39.   }
  41.   render() {
  42.     return (
  43.       <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
  44.         <TabBar
  45.           unselectedTintColor="#949494"
  46.           tintColor="#33A3F4"
  47.           barTintColor="white"
  48.           hidden={this.state.hidden}
  49.         >
  50.           <TabBar.Item
  51.             title="Life"
  52.             key="Life"
  53.             icon={<div style={{
  54.               width: '22px',
  55.               height: '22px',
  56.               background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat' }}
  57.             />
  58.             }
  59.             selectedIcon={<div style={{
  60.               width: '22px',
  61.               height: '22px',
  62.               background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat' }}
  63.             />
  64.             }
  65.             selected={this.state.selectedTab === 'blueTab'}
  66.             badge={1}
  67.             onPress={() => {
  68.               this.setState({
  69.                 selectedTab: 'blueTab',
  70.               });
  71.             }}
  72.             data-seed="logId"
  73.           >
  74.             {this.renderContent('Life')}
  75.           </TabBar.Item>
  76.           <TabBar.Item
  77.             icon={
  78.               <div style={{
  79.                 width: '22px',
  80.                 height: '22px',
  81.                 background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat' }}
  82.               />
  83.             }
  84.             selectedIcon={
  85.               <div style={{
  86.                 width: '22px',
  87.                 height: '22px',
  88.                 background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat' }}
  89.               />
  90.             }
  91.             title="Koubei"
  92.             key="Koubei"
  93.             badge={'new'}
  94.             selected={this.state.selectedTab === 'redTab'}
  95.             onPress={() => {
  96.               this.setState({
  97.                 selectedTab: 'redTab',
  98.               });
  99.             }}
  100.             data-seed="logId1"
  101.           >
  102.             {this.renderContent('Koubei')}
  103.           </TabBar.Item>
  104.           <TabBar.Item
  105.             icon={
  106.               <div style={{
  107.                 width: '22px',
  108.                 height: '22px',
  109.                 background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat' }}
  110.               />
  111.             }
  112.             selectedIcon={
  113.               <div style={{
  114.                 width: '22px',
  115.                 height: '22px',
  116.                 background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat' }}
  117.               />
  118.             }
  119.             title="Friend"
  120.             key="Friend"
  121.             dot
  122.             selected={this.state.selectedTab === 'greenTab'}
  123.             onPress={() => {
  124.               this.setState({
  125.                 selectedTab: 'greenTab',
  126.               });
  127.             }}
  128.           >
  129.             {this.renderContent('Friend')}
  130.           </TabBar.Item>
  131.           <TabBar.Item
  132.             icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
  133.             selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
  134.             title="My"
  135.             key="my"
  136.             selected={this.state.selectedTab === 'yellowTab'}
  137.             onPress={() => {
  138.               this.setState({
  139.                 selectedTab: 'yellowTab',
  140.               });
  141.             }}
  142.           >
  143.             {this.renderContent('My')}
  144.           </TabBar.Item>
  145.         </TabBar>
  146.       </div>
  147.     );
  148.   }
  149. }
  151. ReactDOM.render(<TabBarExample />, mountNode);
  1. #tab-bar.demo {
  2.   display: flex;
  3.   flex-direction: column;
  4. }
  5. #tab-bar .demoName {
  6.   height: 40px;
  7. }
  8. #tab-bar .demo-preview-item .am-tab-bar {
  9.   background-color: white;
  10. }

与ListView结合使用

  1. import { TabBar, ListView } from 'antd-mobile';
  3. const data = [
  4.   {
  5.     img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
  6.     title: 'Meet hotel',
  7.     des: '不是所有的兼职汪都需要风吹日晒',
  8.   },
  9.   {
  10.     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
  11.     title: 'McDonald\'s invites you',
  12.     des: '不是所有的兼职汪都需要风吹日晒',
  13.   },
  14.   {
  15.     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
  16.     title: 'Eat the week',
  17.     des: '不是所有的兼职汪都需要风吹日晒',
  18.   },
  19. ];
  20. const NUM_SECTIONS = 5;
  21. const NUM_ROWS_PER_SECTION = 5;
  22. let pageIndex = 0;
  24. const dataBlobs = {};
  25. let sectionIDs = [];
  26. let rowIDs = [];
  27. function genData(pIndex = 0) {
  28.   for (let i = 0; i < NUM_SECTIONS; i++) {
  29.     const ii = (pIndex * NUM_SECTIONS) + i;
  30.     const sectionName = `Section ${ii}`;
  31.     sectionIDs.push(sectionName);
  32.     dataBlobs[sectionName] = sectionName;
  33.     rowIDs[ii] = [];
  35.     for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
  36.       const rowName = `S${ii}, R${jj}`;
  37.       rowIDs[ii].push(rowName);
  38.       dataBlobs[rowName] = rowName;
  39.     }
  40.   }
  41.   sectionIDs = [...sectionIDs];
  42.   rowIDs = [...rowIDs];
  43. }
  45. class ListViewExample extends React.Component {
  46.   constructor(props) {
  47.     super(props);
  48.     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
  49.     const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];
  51.     const dataSource = new ListView.DataSource({
  52.       getRowData,
  53.       getSectionHeaderData: getSectionData,
  54.       rowHasChanged: (row1, row2) => row1 !== row2,
  55.       sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
  56.     });
  58.     this.state = {
  59.       dataSource,
  60.       isLoading: true,
  61.       height: (document.documentElement.clientHeight * 3) / 4,
  62.     };
  63.   }
  65.   componentDidMount() {
  66.     const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
  67.     setTimeout(() => {
  68.       genData();
  69.       this.setState({
  70.         dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
  71.         isLoading: false,
  72.         height: hei,
  73.       });
  74.     }, 600);
  75.   }
  77.   onEndReached = (event) => {
  78.     if (this.state.isLoading && !this.state.hasMore) {
  79.       return;
  80.     }
  81.     console.log('reach end', event);
  82.     this.setState({ isLoading: true });
  83.     setTimeout(() => {
  84.       genData(++pageIndex);
  85.       this.setState({
  86.         dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
  87.         isLoading: false,
  88.       });
  89.     }, 1000);
  90.   }
  92.   render() {
  93.     const separator = (sectionID, rowID) => (
  94.       <div
  95.         key={`${sectionID}-${rowID}`}
  96.         style={{
  97.           backgroundColor: '#F5F5F9',
  98.           height: 8,
  99.           borderTop: '1px solid #ECECED',
  100.           borderBottom: '1px solid #ECECED',
  101.         }}
  102.       />
  103.     );
  104.     let index = data.length - 1;
  105.     const row = (rowData, sectionID, rowID) => {
  106.       if (index < 0) {
  107.         index = data.length - 1;
  108.       }
  109.       const obj = data[index--];
  110.       return (
  111.         <div key={rowID} style={{ padding: '0 15px' }}>
  112.           <div
  113.             style={{
  114.               lineHeight: '50px',
  115.               color: '#888',
  116.               fontSize: 18,
  117.               borderBottom: '1px solid #F6F6F6',
  118.             }}
  119.           >{obj.title}</div>
  120.           <div style={{ display: 'flex', padding: '15px 0' }}>
  121.             <img style={{ height: '64px', marginRight: '15px' }} src={obj.img} alt="" />
  122.             <div style={{ lineHeight: 1 }}>
  123.               <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>{obj.des}</div>
  124.               <div><span style={{ fontSize: '30px', color: '#FF6E27' }}>35</span>¥ {rowID}</div>
  125.             </div>
  126.           </div>
  127.         </div>
  128.       );
  129.     };
  131.     return (
  132.       <ListView
  133.         ref={el => this.lv = el}
  134.         dataSource={this.state.dataSource}
  135.         renderHeader={() => <span>header</span>}
  136.         renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
  137.           {this.state.isLoading ? 'Loading...' : 'Loaded'}
  138.         </div>)}
  139.         renderSectionHeader={sectionData => (
  140.           <div>{`Task ${sectionData.split(' ')[1]}`}</div>
  141.         )}
  142.         renderRow={row}
  143.         renderSeparator={separator}
  144.         style={{
  145.           height: this.state.height,
  146.           overflow: 'auto',
  147.         }}
  148.         pageSize={4}
  149.         onScroll={() => { console.log('scroll'); }}
  150.         scrollRenderAheadDistance={500}
  151.         onEndReached={this.onEndReached}
  152.         onEndReachedThreshold={10}
  153.       />
  154.     );
  155.   }
  156. }
  158. class TabBarExample extends React.Component {
  159.   constructor(props) {
  160.     super(props);
  161.     this.state = {
  162.       selectedTab: 'blueTab',
  163.       hidden: false,
  164.     };
  165.   }
  167.   renderContent(pageText) {
  168.     return (
  169.       <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
  170.         <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
  171.         <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
  172.           onClick={(e) => {
  173.             e.preventDefault();
  174.             this.setState({
  175.               hidden: !this.state.hidden,
  176.             });
  177.           }}
  178.         >
  179.           Click to show/hide tab-bar
  180.         </a>
  181.       </div>
  182.     );
  183.   }
  185.   render() {
  186.     return (
  187.       <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
  188.         <TabBar
  189.           unselectedTintColor="#949494"
  190.           tintColor="#33A3F4"
  191.           barTintColor="white"
  192.           tabBarPosition="bottom"
  193.           hidden={this.state.hidden}
  194.           prerenderingSiblingsNumber={0}
  195.         >
  196.           <TabBar.Item
  197.             title="Life"
  198.             key="Life"
  199.             icon={<div style={{
  200.               width: '22px',
  201.               height: '22px',
  202.               background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat' }}
  203.             />
  204.             }
  205.             selectedIcon={<div style={{
  206.               width: '22px',
  207.               height: '22px',
  208.               background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat' }}
  209.             />
  210.             }
  211.             selected={this.state.selectedTab === 'blueTab'}
  212.             badge={1}
  213.             onPress={() => {
  214.               this.setState({
  215.                 selectedTab: 'blueTab',
  216.               });
  217.             }}
  218.             data-seed="logId"
  219.           >
  220.             <ListViewExample />
  221.           </TabBar.Item>
  222.           <TabBar.Item
  223.             icon={
  224.               <div style={{
  225.                 width: '22px',
  226.                 height: '22px',
  227.                 background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat' }}
  228.               />
  229.             }
  230.             selectedIcon={
  231.               <div style={{
  232.                 width: '22px',
  233.                 height: '22px',
  234.                 background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat' }}
  235.               />
  236.             }
  237.             title="Koubei"
  238.             key="Koubei"
  239.             badge={'new'}
  240.             selected={this.state.selectedTab === 'redTab'}
  241.             onPress={() => {
  242.               this.setState({
  243.                 selectedTab: 'redTab',
  244.               });
  245.             }}
  246.             data-seed="logId1"
  247.           >
  248.             {this.renderContent('Koubei')}
  249.           </TabBar.Item>
  250.           <TabBar.Item
  251.             icon={
  252.               <div style={{
  253.                 width: '22px',
  254.                 height: '22px',
  255.                 background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat' }}
  256.               />
  257.             }
  258.             selectedIcon={
  259.               <div style={{
  260.                 width: '22px',
  261.                 height: '22px',
  262.                 background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat' }}
  263.               />
  264.             }
  265.             title="Friend"
  266.             key="Friend"
  267.             dot
  268.             selected={this.state.selectedTab === 'greenTab'}
  269.             onPress={() => {
  270.               this.setState({
  271.                 selectedTab: 'greenTab',
  272.               });
  273.             }}
  274.           >
  275.             {this.renderContent('Friend')}
  276.           </TabBar.Item>
  277.           <TabBar.Item
  278.             icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
  279.             selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
  280.             title="My"
  281.             key="my"
  282.             selected={this.state.selectedTab === 'yellowTab'}
  283.             onPress={() => {
  284.               this.setState({
  285.                 selectedTab: 'yellowTab',
  286.               });
  287.             }}
  288.           >
  289.             {this.renderContent('My')}
  290.           </TabBar.Item>
  291.         </TabBar>
  292.       </div>
  293.     );
  294.   }
  295. }
  297. ReactDOM.render(<TabBarExample />, mountNode);
  1. .am-tab-bar::-webkit-scrollbar {
  2.   display: none;
  3. }
  4. #tab-bar.demo {
  5.   display: flex;
  6.   flex-direction: column;
  7. }
  8. #tab-bar .demoName {
  9.   height: 40px;
  10. }
  11. #tab-bar .demo-preview-item .am-tab-bar {
  12.   background-color: white;
  13. }

Tabbar 在顶部

控制 Tabbar 显示在顶部 

  1. import { TabBar } from 'antd-mobile';
  3. class TabBarExample extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       selectedTab: 'redTab',
  8.       hidden: false,
  9.       fullScreen: false,
  10.     };
  11.   }
  13.   renderContent(pageText) {
  14.     return (
  15.       <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
  16.         <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
  17.         <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
  18.           onClick={(e) => {
  19.             e.preventDefault();
  20.             this.setState({
  21.               hidden: !this.state.hidden,
  22.             });
  23.           }}
  24.         >
  25.           Click to show/hide tab-bar
  26.         </a>
  27.         <a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
  28.           onClick={(e) => {
  29.             e.preventDefault();
  30.             this.setState({
  31.               fullScreen: !this.state.fullScreen,
  32.             });
  33.           }}
  34.         >
  35.           Click to switch fullscreen
  36.         </a>
  37.       </div>
  38.     );
  39.   }
  41.   render() {
  42.     return (
  43.       <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
  44.         <TabBar
  45.           unselectedTintColor="#949494"
  46.           tintColor="#33A3F4"
  47.           barTintColor="white"
  48.           hidden={this.state.hidden}
  49.           tabBarPosition="top"
  50.         >
  51.           <TabBar.Item
  52.             title="Life"
  53.             key="Life"
  54.             icon={<div style={{
  55.               width: '22px',
  56.               height: '22px',
  57.               background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat' }}
  58.             />
  59.             }
  60.             selectedIcon={<div style={{
  61.               width: '22px',
  62.               height: '22px',
  63.               background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat' }}
  64.             />
  65.             }
  66.             selected={this.state.selectedTab === 'blueTab'}
  67.             badge={1}
  68.             onPress={() => {
  69.               this.setState({
  70.                 selectedTab: 'blueTab',
  71.               });
  72.             }}
  73.             data-seed="logId"
  74.           >
  75.             {this.renderContent('Life')}
  76.           </TabBar.Item>
  77.           <TabBar.Item
  78.             icon={
  79.               <div style={{
  80.                 width: '22px',
  81.                 height: '22px',
  82.                 background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat' }}
  83.               />
  84.             }
  85.             selectedIcon={
  86.               <div style={{
  87.                 width: '22px',
  88.                 height: '22px',
  89.                 background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat' }}
  90.               />
  91.             }
  92.             title="Koubei"
  93.             key="Koubei"
  94.             badge={'new'}
  95.             selected={this.state.selectedTab === 'redTab'}
  96.             onPress={() => {
  97.               this.setState({
  98.                 selectedTab: 'redTab',
  99.               });
  100.             }}
  101.             data-seed="logId1"
  102.           >
  103.             {this.renderContent('Koubei')}
  104.           </TabBar.Item>
  105.           <TabBar.Item
  106.             icon={
  107.               <div style={{
  108.                 width: '22px',
  109.                 height: '22px',
  110.                 background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat' }}
  111.               />
  112.             }
  113.             selectedIcon={
  114.               <div style={{
  115.                 width: '22px',
  116.                 height: '22px',
  117.                 background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat' }}
  118.               />
  119.             }
  120.             title="Friend"
  121.             key="Friend"
  122.             dot
  123.             selected={this.state.selectedTab === 'greenTab'}
  124.             onPress={() => {
  125.               this.setState({
  126.                 selectedTab: 'greenTab',
  127.               });
  128.             }}
  129.           >
  130.             {this.renderContent('Friend')}
  131.           </TabBar.Item>
  132.           <TabBar.Item
  133.             icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
  134.             selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
  135.             title="My"
  136.             key="my"
  137.             selected={this.state.selectedTab === 'yellowTab'}
  138.             onPress={() => {
  139.               this.setState({
  140.                 selectedTab: 'yellowTab',
  141.               });
  142.             }}
  143.           >
  144.             {this.renderContent('My')}
  145.           </TabBar.Item>
  146.         </TabBar>
  147.       </div>
  148.     );
  149.   }
  150. }
  152. ReactDOM.render(<TabBarExample />, mountNode);
  1. #tab-bar.demo {
  2.   display: flex;
  3.   flex-direction: column;
  4. }
  5. #tab-bar .demoName {
  6.   height: 40px;
  7. }
  8. #tab-bar .demo-preview-item .am-tab-bar {
  9.   background-color: white;
  10. }

TabBar标签栏 - 图1

API

TabBar

属性说明类型默认值
barTintColortabbar 背景色Stringwhite
tintColor选中的字体颜色String#108ee9
unselectedTintColor未选中的字体颜色String'#888'
hidden是否隐藏Booleanfalse
prefixCls样式前缀String'am-tab-bar'
noRenderContent不渲染内容部分Booleanfalse
prerenderingSiblingsNumber预加载相邻的tab内容, Infinity: 加载所有的tab内容, 0: 仅加载当前tab内容, 当页面较复杂时，建议设为0，提升页面加载性能number1
tabBarPositiontabbar 位置'top'|'bottom''bottom'

TabBar.Item

属性说明类型默认值
badge徽标数Number \ String无
dot是否在右上角显示小红点（在设置badge的情况下失效）Booleanfalse
onPressbar 点击触发，需要自己改变组件 state & selecte={true}Function(){}
selected是否选中Booleanfalse
icon默认展示图片见 demo
selectedIcon选中后的展示图片见 demo
title标题文字String
key唯一标识String无