Tabs 标签页

选项卡切换组件,预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Tabs",
  3. "usingComponents": {
  4. "wux-tabs": "../../dist/tabs/index",
  5. "wux-tab": "../../dist/tab/index",
  6. "wux-badge": "../../dist/badge/index"
  7. }
  8. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Tabs</view>
  4. <view class="page__desc">标签页</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="sub-title">Default</view>
  8. <wux-tabs defaultCurrent="tab1">
  9. <wux-tab key="tab1" title="Tab 1"></wux-tab>
  10. <wux-tab key="tab2" title="Tab 2"></wux-tab>
  11. <wux-tab key="tab3" title="Tab 3"></wux-tab>
  12. </wux-tabs>
  13. <view class="sub-title">Theme = positive</view>
  14. <wux-tabs defaultCurrent="tab1" theme="positive">
  15. <wux-tab key="tab1" title="Tab 1"></wux-tab>
  16. <wux-tab key="tab2" title="Tab 2"></wux-tab>
  17. <wux-tab key="tab3" title="Tab 3"></wux-tab>
  18. </wux-tabs>
  19. <view class="sub-title">Direction = vertical</view>
  20. <wux-tabs defaultCurrent="tab1" direction="vertical">
  21. <wux-tab key="tab1" title="Tab 1"></wux-tab>
  22. <wux-tab key="tab2" title="Tab 2"></wux-tab>
  23. <wux-tab key="tab3" title="Tab 3"></wux-tab>
  24. </wux-tabs>
  25. <view class="sub-title">Disabled</view>
  26. <wux-tabs defaultCurrent="tab1">
  27. <wux-tab key="tab1" title="Tab 1"></wux-tab>
  28. <wux-tab disabled key="tab2" title="Tab 2"></wux-tab>
  29. <wux-tab key="tab3" title="Tab 3"></wux-tab>
  30. </wux-tabs>
  31. <view class="sub-title">Controlled</view>
  32. <wux-tabs controlled current="{{ current }}" bindchange="onChange">
  33. <wux-tab key="tab1" title="Tab 1"></wux-tab>
  34. <wux-tab key="tab2" title="Tab 2"></wux-tab>
  35. <wux-tab key="tab3" title="Tab 3"></wux-tab>
  36. </wux-tabs>
  37. <view class="sub-title">Slot</view>
  38. <wux-tabs controlled current="{{ current }}" bindchange="onChange">
  39. <wux-tab disabled key="tab1">
  40. <image src="https://wux.cdn.cloverstd.com/logo.png" style="width: 20px; height: 20px; margin-right: 5px;" />
  41. <text>Tab 1</text>
  42. </wux-tab>
  43. <wux-tab key="tab2">
  44. <image src="https://wux.cdn.cloverstd.com/logo.png" style="width: 20px; height: 20px; margin-right: 5px;" />
  45. <text>Tab 2</text>
  46. </wux-tab>
  47. <wux-tab key="tab3">
  48. <image src="https://wux.cdn.cloverstd.com/logo.png" style="width: 20px; height: 20px; margin-right: 5px;" />
  49. <text>Tab 3</text>
  50. </wux-tab>
  51. </wux-tabs>
  52. <view class="sub-title">Scroll</view>
  53. <wux-tabs controlled scroll current="{{ current }}" bindchange="onChange">
  54. <wux-tab key="tab1" title="Tab 1"></wux-tab>
  55. <wux-tab key="tab2" title="Tab 2"></wux-tab>
  56. <wux-tab key="tab3" title="Tab 3"></wux-tab>
  57. <wux-tab key="tab4" title="Tab 4"></wux-tab>
  58. <wux-tab key="tab5" title="Tab 5"></wux-tab>
  59. <wux-tab key="tab6" title="Tab 6"></wux-tab>
  60. <wux-tab key="tab7" title="Tab 7"></wux-tab>
  61. <wux-tab key="tab8" title="Tab 8"></wux-tab>
  62. <wux-tab key="tab9" title="Tab 9"></wux-tab>
  63. </wux-tabs>
  64. <view class="sub-title">Badge</view>
  65. <wux-tabs controlled current="{{ current }}" bindchange="onChange">
  66. <wux-tab key="tab1">
  67. <wux-badge count="3">Tab 1</wux-badge>
  68. </wux-tab>
  69. <wux-tab key="tab2">
  70. <wux-badge count="1024">Tab 2</wux-badge>
  71. </wux-tab>
  72. <wux-tab key="tab3">
  73. <wux-badge dot>Tab 3</wux-badge>
  74. </wux-tab>
  75. </wux-tabs>
  76. <view class="sub-title">With Swiper</view>
  77. <wux-tabs wux-class="bordered" controlled current="{{ key }}" bindchange="onTabsChange">
  78. <block wx:for="{{ tabs }}" wx:key="key">
  79. <wux-tab key="{{ item.key }}" title="{{ item.title }}"></wux-tab>
  80. </block>
  81. </wux-tabs>
  82. <swiper current="{{ index }}" bindchange="onSwiperChange">
  83. <block wx:for="{{ tabs }}" wx:key="key">
  84. <swiper-item>
  85. <view class="content">{{ item.content }}</view>
  86. </swiper-item>
  87. </block>
  88. </swiper>
  89. </view>
  90. </view>
  1. Page({
  2. data: {
  3. current: 'tab1',
  4. tabs: [
  5. {
  6. key: 'tab1',
  7. title: 'Tab 1',
  8. content: 'Content of tab 1',
  9. },
  10. {
  11. key: 'tab2',
  12. title: 'Tab 2',
  13. content: 'Content of tab 2',
  14. },
  15. {
  16. key: 'tab3',
  17. title: 'Tab 3',
  18. content: 'Content of tab 3',
  19. },
  20. ],
  21. },
  22. onChange(e) {
  23. console.log('onChange', e)
  24. this.setData({
  25. current: e.detail.key,
  26. })
  27. },
  28. onTabsChange(e) {
  29. console.log('onTabsChange', e)
  30. const { key } = e.detail
  31. const index = this.data.tabs.map((n) => n.key).indexOf(key)
  32. this.setData({
  33. key,
  34. index,
  35. })
  36. },
  37. onSwiperChange(e) {
  38. console.log('onSwiperChange', e)
  39. const { current: index, source } = e.detail
  40. const { key } = this.data.tabs[index]
  41. if (!!source) {
  42. this.setData({
  43. key,
  44. index,
  45. })
  46. }
  47. },
  48. })

视频演示

Tabs

API

Tabs props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-tabs
defaultCurrent string 默认激活 tab 面板的 key,当 controlledfalse 时才生效 -
current string 用于手动激活 tab 面板的 key,当 controlledtrue 时才生效 -
scroll boolean 是否开启横向滚动 false
controlled boolean 是否受控 说明文档 false
theme string 主题色,可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark balanced
direction string tab 面板的排列方向,可选值为 horizontal、vertical horizontal
bind:change function 切换面板的回调函数 -

Tabs externalClasses

名称 描述
wux-class 根节点样式类

Tab props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-tabs__tab
key string 对应 key -
title string 选项卡标题 -
disabled boolean 是否禁用 false

Tab slot

名称 描述
- 自定义内容

Tab externalClasses

名称 描述
wux-class 根节点样式类