title: tabs 标签栏 header: develop nav: component sidebar: tabs

webUrl: https://qft12m.smartapps.cn/component/tabs/tabs

解释：标签栏，用于让用户在不同的视图中进行切换。基础库 3.100.4 版本开始支持。

属性说明

属性名 类型 默认值 必填 说明 最低版本
tabs-background-color String ‘#fff’ 否 tabs 背景色,必须填写十六进制颜色 3.100.4

低版本请做兼容性处理
tabs-active-text-color String ‘#000’ 否 tabs 激活 tab-item 文字颜色 3.100.4

低版本请做兼容性处理
tabs-inactive-text-color String ‘#666’ 否 tabs 非激活 tab-item 文字颜色 3.100.4

低版本请做兼容性处理
tabs-underline-color String ‘#333’ 否 tabs 激活 tab-item 下划线颜色 3.100.4

低版本请做兼容性处理
active-name String 无 否 仅用于普通标签栏组件，当前激活 tab-item 的 对应的name 值，须搭配bindtabchange 一起使用。 3.100.4

低版本请做兼容性处理
url-query-name String 无 否 仅用于可寻址标签栏组件，当前 tab 所改变的 url query 中参数 key，需要通过 tabs 修改页面 url 的时候设置。 3.100.4

低版本请做兼容性处理
max-tab-item-amount Number 5 否 当前 tabs 视图中最多容纳的 tab-item 数量，低于此数量均分排列，超出此数量划屏。默认五个，开发者根据业务需求调整 3.100.4

低版本请做兼容性处理
bindtabchange EventHandle 否 tab 被点击的回调，可以在e.detail.name中取到当前点击的tab-item对应name值 3.100.4

低版本请做兼容性处理

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/tabs/tabs - 图1 请使用百度APP扫码

普通标签栏组件与可寻址标签栏组件的区别是：可寻址标签栏组件在标签栏 tab 切换时，该页面的 uri 参数会同步变化；反之，跳转某页面 uri 时，指定标签栏栏绑定的参数值也会打开该值对应的 tab 页。由于这种绑定关系的存在，相比于普通标签栏栏，可寻址标签栏栏更利于搜索引擎收录。 建议开发者尽量使用可寻址标签栏栏组件实现页面主标签栏栏功能 。例如：主页的多频道切换。 标签栏组件的使用需要通过 tabs 和 tab-item 组件配合实现。

代码示例 1 ：普通标签栏（默认样式）

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">默认样式</view>
  3.     <tabs 
  4.         class="border-bottom"
  5.         active-name="{{activeName}}" 
  6.         bindtabchange="tabsOne">
  7.         <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />
  8.     </tabs>
  9.     <view class="intro">
  10.         <view>标签{{content}}内容展示区</view>
  11.     </view>
  12. </view>
  1. Page({
  2.     data: {
  3.         tabs: [{
  4.             name: '一',
  5.             label: '标签一'
  6.         }, {
  7.             name: '二',
  8.             label: '标签二'
  9.         }, {
  10.             name: '三',
  11.             label: '标签三'
  12.         }],
  13.         content: '一',
  14.     },
  15.     tabsOne(e) {
  16.         console.log(e.detail.name);
  17.         this.setData({
  18.             content: e.detail.name,
  19.             activeName: e.detail.name
  20.         })
  21.     }
  22. });

:::

代码示例 2 ：可横滑展示

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>可横滑显示</view>
  4.         <view>max-tab-item-amount='7'</view>
  5.     </view>
  6.     <tabs 
  7.         url-query-name="two" 
  8.         max-tab-item-amount='5' 
  9.         class="border-bottom" 
  10.         bindtabchange="tabsTwo">
  11.         <tab-item s-for="tab in tabsTwo" name="{{tab.name}}" label="{{tab.label}}" />
  12.     </tabs>
  13.     <view class="intro">
  14.         <view>标签{{contentTwo}}内容展示区</view>
  15.     </view>
  16. </view>
  1. Page({
  2.     data: {
  3.         tabsTwo: [{
  4.             name: '一',
  5.             label: '标签一'
  6.         }, {
  7.             name: '二',
  8.             label: '标签二'
  9.         }, {
  10.             name: '三',
  11.             label: '标签三'
  12.         }, {
  13.             name: '四',
  14.             label: '标签四'
  15.         }, {
  16.             name: '五',
  17.             label: '标签五'
  18.         }, {
  19.             name: '六',
  20.             label: '标签六'
  21.         }, {
  22.             name: '七',
  23.             label: '标签七'
  24.         }],
  25.         contentTwo: '一'
  26.     },
  27.     tabsTwo(e) {
  28.         console.log(e.detail.name);
  29.         this.setData({
  30.             contentTwo: e.detail.name
  31.         })
  32.     }
  33. });

:::

代码示例 3 ：自定义样式

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>自定义样式</view>
  4.     </view>
  5.     <tabs 
  6.         url-query-name="three" 
  7.         class="border-bottom"
  8.         tabs-background-color="#3388ff"
  9.         tabs-underline-color = "#fff"
  10.         tabs-inactive-text-color="#fff"
  11.         tabs-active-text-color="#fff"
  12.         bindtabchange="tabsThree"
  13.         >
  14.         <tab-item s-for="tab in tabsThree" 
  15.                   name="{{tab.name}}" 
  16.                   label="{{tab.label}}" />
  17.     </tabs>
  18.     <view class="intro">
  19.         <view>标签{{contentThree}}内容展示区</view>
  20.     </view>
  21. </view>
  1. Page({
  2.     data: {
  3.         tabsThree: [{
  4.             name: '一',
  5.             label: '标签一',
  6.         }, {
  7.             name: '二',
  8.             label: '标签二',
  9.         }, {
  10.             name: '三',
  11.             label: '标签三'
  12.         }],
  13.         contentThree: '一'
  14.     },
  15.     tabsThree(e) {
  16.         console.log(e.detail.name);
  17.         this.setData({
  18.             contentThree: e.detail.name
  19.         })
  20.     }
  21. });

:::

代码示例 4 ：显示徽标

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>显示徽标</view>
  4.     </view>
  5.     <tabs url-query-name="four" class="border-bottom" bindtabchange="tabsFour">
  6.         <tab-item 
  7.             badge-type="{{tab.badgeType}}"
  8.             badge-text="{{tab.badgeText}}"
  9.             s-for="tab in tabsFour" 
  10.             name="{{tab.name}}" 
  11.             label="{{tab.label}}" />
  12.     </tabs>
  13.     <view class="intro">
  14.         <view>标签{{contentFour}}内容展示区</view>
  15.     </view> 
  16. </view>
  1. Page({
  2.     data: {
  3.         tabsFour: [{
  4.             name: '一',
  5.             label: '标签一',
  6.             badgeType: 'text',
  7.             badgeText: '99+'
  8.         }, {
  9.             name: '二',
  10.             label: '标签二',
  11.             badgeType: 'dot'
  12.         }, {
  13.             name: '三',
  14.             label: '标签三'
  15.         }],
  16.         contentFour: '一'
  17.     },
  18.     tabsFour(e) {
  19.         console.log(e.detail.name);
  20.         this.setData({
  21.             contentFour: e.detail.name
  22.         })
  23.     }
  24. });

:::

代码示例 5 ：跳转寻址

  • 旧页面:

:::codeTab

  1. <view class="card-area">
  2.     <view class="top-description border-bottom">
  3.         <view>支持寻址</view>
  4.     </view>
  5.     <button type="primary" bind:tap="enterNewTabsPage">进入页面并定位到标签二</button>
  6. </view>
  1. Page({
  2.     data: {
  3.         tabsFour: [{
  4.             name: '一',
  5.             label: '标签一',
  6.             badgeType: 'text',
  7.             badgeText: '99+'
  8.         }, {
  9.             name: '二',
  10.             label: '标签二',
  11.             badgeType: 'dot'
  12.         }, {
  13.             name: '三',
  14.             label: '标签三'
  15.         }],
  16.         contentFour: '一'
  17.     },
  18.     enterNewTabsPage() {
  19.         swan.navigateTo({
  20.             url: "/newTabs/newTabs?position=二"
  21.         });
  22.     }
  23. });

:::

  • 新页面:

:::codeTab

  1. <tabs url-query-name="position" class="border-bottom">
  2.     <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />
  3. </tabs>
  1. Page({
  2.     data: {
  3.         tabs: [{
  4.             name: '一',
  5.             label: '标签一'
  6.         }, {
  7.             name: '二',
  8.             label: '标签二'
  9.         }, {
  10.             name: '三',
  11.             label: '标签三'
  12.         }],
  13.         content: '一'
  14.     },
  15.     onLoad(query) {
  16.         console.log(query);
  17.         swan.setURLQuery(query);
  18.         this.setData({
  19.             content: query.position
  20.         });
  21.     },
  22.     onURLQueryChange({newURLQuery, oldURLQuery}) {
  23.         console.log(oldURLQuery, newURLQuery);
  24.         this.setData({
  25.             content: `${newURLQuery.position}`
  26.         });
  27.     }
  28. });

:::

代码示例 6 ：可寻址标签栏用法

:::codeTab

  1. <!-- 指定 url-query-name 后，通过修改url来控制当前选中的tab，无需指定 active-name -->
  2. <!-- 虽然 bindtabchange 依旧会生效，但是直接使用 onURLQueryChange 是更好的做法 -->
  3. <tabs url-query-name="city">
  4.     <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />
  5. </tabs>
  6. <!-- 查看页面uri变化 -->
  7. <view class="wrap">{{content}}</view>
  1.         {
  2.             name: 'guangzhou',
  3.             label: '广州'
  4.         }, 
  5.         {
  6.             name: 'shenzhen',
  7.             label: '深圳'
  8.         }, {
  9.             name: 'xiamen',
  10.             label: '厦门'
  11.         }, {
  12.             name: 'haerbin',
  13.             label: '哈尔滨'
  14.         }],
  15.         content: 'beijing'
  16.     },
  17.     // 监听函数，点击切换 tabs 组件或者调用 swan.setURLQuery 时，url 发生变化自动触发
  18.     onURLQueryChange({newURLQuery, oldURLQuery}) {
  19.         console.log(newURLQuery, oldURLQuery)
  20.         this.setData({
  21.             content: `${oldURLQuery.city || 'beijing'} To ${newURLQuery.city}`
  22.         })
  23. →    // 此时tab切换，刷新tabs下方视图数据
  24.     }
  25. });

:::

active-name 和 url-query-name 不要搭配在一起使用：

  • 如果开发者需要的只是一个普通的顶部标签栏组件，可以通过 active-name 配合 bindtabchange 来控制当前选中tab-item；
  • 如果开发者需要的是可以修改页面 url 的顶部标签栏组件，只需指定url-query-name，无需设置 active-name

相关链接 ： onURLQueryChange

Bug & Tip

  • Bug：页面中有多个tab组件时，已知徽标会错位，css里全局设置 *{box-sizing: content-box;} 做兼容。