wxc-tab

MinUI 小程序组件 - 选项卡

Install

  1. $ min install @minui/wxc-tab

Demos

动画版

可改变颜色，默认选中超出范围

选项卡 tab - 图1

  1. <template>
  2.   <wxc-tab
  3.     bind:tabchange="onClick"
  4.     default-index="{{4}}"
  5.     active-text-color="#108ee9"
  6.     active-line-color="#108ee9"
  7.     component-id="c1"
  8.     animate="{{true}}"
  9.   >
  10.     <wxc-tab-panel
  11.       wx:for="{{tabs}}"
  12.       wx:for-item="tab"
  13.       wx:key="{{tab.content}}"
  14.       tab-index="{{index}}"
  15.       component-id="c1"
  16.       label="{{tab.title}}"
  17.     >
  18.       {{tab.content}}
  19.     </wxc-tab-panel>
  21.   </wxc-tab>
  22. </template>
  24. <script>
  25. export default {
  26.   config: {
  27.     usingComponents: {
  28.       'wxc-tab': '@minui/wxc-tab',
  29.       'wxc-tab-panel': '@minui/wxc-tab/panel'
  30.     }
  31.   },
  32.   data: {
  33.     tabs: [
  34.       {title: '选项一', content: '内容一'},
  35.       {title: '选项二', content: '内容二'},
  36.       {title: '选项三', content: '内容三'}
  37.     ]
  38.   },
  39.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  40.   methods: {
  41.     onClick: function(e) {
  42.       console.log(`ComponentId:${e.detail.componentId},you selected:${e.detail.key}`);
  43.     }
  44.   }
  45. }
  46. </script>
  48. <style>
  49. </style>

基础版本

小于等于4个tab

选项卡 tab - 图2

  1. <template>
  2.   <wxc-tab
  3.     bind:tabchange="onClick"
  4.     default-index="{{0}}"
  5.     component-id="c4"
  6.   >
  7.     <wxc-tab-panel
  8.       wx:for="{{tabs}}"
  9.       wx:for-item="tab"
  10.       wx:key="{{tab.content}}"
  11.       tab-index="{{index}}"
  12.       component-id="c4"
  13.       label="{{tab.title}}"
  14.     >
  15.       {{tab.content}}
  16.     </wxc-tab-panel>
  18.   </wxc-tab>
  19. </template>
  21. <script>
  22. export default {
  23.   config: {
  24.     usingComponents: {
  25.       'wxc-tab': '@minui/wxc-tab',
  26.       'wxc-tab-panel': '@minui/wxc-tab/panel'
  27.     }
  28.   },
  29.   data: {
  30.     tabs: [
  31.       {title: '选项一', content: '内容一'},
  32.       {title: '选项二', content: '内容二'},
  33.       {title: '选项三', content: '内容三'}
  34.     ]
  35.   },
  36.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  37.   methods: {
  38.     onClick: function(e) {
  39.       console.log(`ComponentId:${e.detail.componentId},you selected:${e.detail.key}`);
  40.     }
  41.   }
  42. }
  43. </script>
  45. <style>
  46. </style>

多个tab

可滑动，有动画

选项卡 tab - 图3

  1. <template>
  2.   <wxc-tab
  3.     bind:tabchange="onClick"
  4.     default-index="{{2}}"
  5.     component-id="c2"
  6.     animate="{{true}}"
  7.   >
  8.     <wxc-tab-panel
  9.       wx:for="{{tabs}}"
  10.       wx:for-item="tab"
  11.       wx:key="{{tab.content}}"
  12.       tab-index="{{index}}"
  13.       component-id="c2"
  14.       label="{{tab.title}}"
  15.     >
  16.       {{tab.content}}
  17.     </wxc-tab-panel>
  19.   </wxc-tab>
  20. </template>
  22. <script>
  23. export default {
  24.   config: {
  25.     usingComponents: {
  26.       'wxc-tab': '@minui/wxc-tab',
  27.       'wxc-tab-panel': '@minui/wxc-tab/panel',
  28.       'wxc-tab-label': '@minui/wxc-tab/label'
  29.     }
  30.   },
  31.   data: {
  32.     tabs: [
  33.       {title: '选项一', content: '内容一'},
  34.       {title: '选项二', content: '内容二'},
  35.       {title: '选项三', content: '内容三'},
  36.       {title: '选项四', content: '内容四'},
  37.       {title: '选项五', content: '内容五'},
  38.       {title: '选项六', content: '内容六'}
  39.     ]
  40.   },
  41.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  42.   methods: {
  43.     onClick: function(e) {
  44.       console.log(`ComponentId:${e.detail.componentId},you selected:${e.detail.key}`);
  45.     }
  46.   }
  47. }
  48. </script>
  50. <style>
  51. </style>

自定义头部

可自定义头部

选项卡 tab - 图4

  1. <template>
  2.   <wxc-tab
  3.     bind:tabchange="onClick"
  4.     default-index="{{activeKey}}"
  5.     component-id="c3"
  6.     animate="{{true}}"
  7.     class="demo-tab"
  8.   >
  9.   <view slot="tablabel">
  10.     <wxc-tab-label
  11.       wx:for="{{tabs}}"
  12.       wx:for-item="tab"
  13.       wx:key="{{tab.title}}"
  14.       tab-index="{{index}}"
  15.       component-id="c3"
  16.     >
  17.       <view class="demo-tab__label">
  18.         <icon type="success" size="16"
  19.           color="{{ activeKey === index ? '#ff5777' : '#555' }}"
  20.         >
  21.         </icon>
  22.         <view class="demo-tab__text {{ activeKey === index ? 'demo-tab--active' : ''}}">
  23.           {{tab.title}}
  24.         </view>
  25.       </view>
  26.     </wxc-tab-label>
  27.   </view>
  29.   <wxc-tab-panel
  30.     wx:for="{{tabs}}"
  31.     wx:for-item="tab"
  32.     wx:key="{{tab.content}}"
  33.     tab-index="{{index}}"
  34.     component-id="c3"
  35.   >
  36.     {{tab.content}}
  37.   </wxc-tab-panel>
  39.   </wxc-tab>
  40. </template>
  42. <script>
  43. export default {
  44.   config: {
  45.     usingComponents: {
  46.       'wxc-tab': '@minui/wxc-tab',
  47.       'wxc-tab-panel': '@minui/wxc-tab/panel',
  48.       'wxc-tab-label': '@minui/wxc-tab/label'
  49.     }
  50.   },
  51.   data: {
  52.     tabs: [
  53.       {title: '选项一', content: '内容一'},
  54.       {title: '选项二', content: '内容二'},
  55.       {title: '选项三', content: '内容三'}
  56.     ],
  57.     activeKey: 0
  58.   },
  59.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  60.   methods: {
  61.     onClick: function(e) {
  62.       console.log(`ComponentId:${e.detail.componentId},you selected:${e.detail.key}`);
  63.       const idx = e.detail.key;
  64.       this.setData({
  65.         activeKey: idx
  66.       });
  67.     }
  68.   }
  69. }
  70. </script>
  72. <style lang="pcss">
  73. @b demo-tab {
  74.   @e label {
  75.     width: 100%;
  76.     margin: 20rpx 0;
  77.     display: flex;
  78.     justify-content: center;
  79.     align-items: center;
  80.   }
  81.   @e text {
  82.     margin-left: 8rpx;
  83.   }
  84.   @m active {
  85.     color: #ff5777;
  86.   }
  87. }
  88. </style>

API

Tab【props】

名称描述
default-index[说明]：当前激活面板的 index。[类型]：Number[默认值]：0
animate[说明]：是否开启动画。[类型]：Boolean[默认值]：false
component-id[说明]：同时调用两个tab时，需要指定component-id。[类型]：String
bindtabchange[说明]：tab切换的回调函数
text-color[说明]：文字颜色。[类型]：String[默认值]：#000
active-text-color[说明]：选中文字颜色。[类型]：String[默认值]：#ff5777
line-color[说明]：线条颜色。[类型]：String[默认值]：#ddd
active-line-color[说明]：选中线条颜色。[类型]：String[默认值]：#ff5777
full-screen[说明]：tab 组件全屏设置。[类型]：Boolean[默认值]：false

Tab-Panel【props】

名称描述
tab-index[说明]：激活当前面板的 index。[类型]：Number[默认值]：0
label[说明]：选项卡头部显示的文字。[类型]：String
component-id[说明]：同时调用两个tab时，需要指定component-id。[类型]：String

Tab-Label【props】

自定义头部时，需要在外层加slot="tablabel"

名称描述
tab-index[说明]：激活当前面板的 index。[类型]：Number[默认值]：0
component-id[说明]：同时调用两个tab时，需要指定component-id。[类型]：String
地址
tab 组件文档 https://meili.github.io/min/docs/minui/index.html#tab
tab 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-tab
MinUI 组件库 https://github.com/meili/minui

Preview

tab

ChangeLog

v1.0.5（2018.04.27）

  • panel 高度自适应

v1.0.4（2018.02.09）

  • 新增 full-screen 属性

v1.0.3（2018.01.04）

  • 修复点击tab时的定位问题

v1.0.2（2017.11.02）

  • update .npmignore

v1.0.1（2017.10.24）

  • 初始版本