tabs 标签栏
- 属性说明
- 示例
  - 代码示例 1：默认样式
  - 代码示例 2：可横滑展示
  - 代码示例 3：自定义样式
  - 代码示例 4：显示徽标
  - 代码示例 5：跳转寻址
  - 代码示例 6：可寻址标签栏用法
- Bug & Tip

tabs 标签栏

基础库 3.100.4 版本开始支持。

解释：标签栏，用于让用户在不同的视图中进行切换。标签栏组件的使用需要通过 tabs 和 tab-item 组件配合实现。设计文档详见标签栏。

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

属性说明

属性名	类型	默认值	必填	说明	最低版本
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 低版本请做兼容性处理

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">默认样式</view>

   <tabs 

   class="border-bottom"

   active-name="{{activeNameOne}}"

   bindtabchange="tabsOne">

   <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />

   </tabs>

   <view class="intro">

   <view>标签{{content}}内容展示区</view>

   </view>

   </view>

  </view>


 

  Page({

   data: {

   tabs: [{

   name: '一',

   label: '标签一'

   }, {

   name: '二',

   label: '标签二'

   }, {

   name: '三',

   label: '标签三'

   }],

   content: '一',

   activeNameOne: '一'

   },

   tabsOne(e) {

   this.setData({

   content: e.detail.name,

   activeNameOne: e.detail.name

   })

   }

  });

设计指南

普通标签栏中子项（tab-item）的数量 2-5 个为宜。内容文字（label）应简洁易懂，长度不大于 4 个汉字为宜。

错误

只有 1 个子项时请不要使用 tabs

错误

内容过长出现折行不美观，影响阅读体验

代码示例 2：可横滑展示

SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">

   <view>可横滑显示</view>

   <view>max-tab-item-amount="5"</view>

   </view>

   <tabs 

   class="border-bottom" 

   active-name="{{activeNameTwo}}"

   max-tab-item-amount="5"

   bindtabchange="tabsTwo">

   <tab-item s-for="tab in tabsTwo" name="{{tab.name}}" label="{{tab.label}}" />

   </tabs>

   <view class="intro">

   <view>标签{{contentTwo}}内容展示区</view>

   </view>

   </view>

  </view>


 

  Page({

   data: {

   tabsTwo: [{

   name: '一',

   label: '标签一'

   }, {

   name: '二',

   label: '标签二'

   }, {

   name: '三',

   label: '标签三'

   }, {

   name: '四',

   label: '标签四'

   }, {

   name: '五',

   label: '标签五'

   }, {

   name: '六',

   label: '标签六'

   }, {

   name: '七',

   label: '标签七'

   }],

   contentTwo: '一',

   activeNameTwo: '一'

   },

   tabsTwo(e) {

   this.setData({

   contentTwo: e.detail.name,

   activeNameTwo: e.detail.name

   })

   }

  });

代码示例 3：自定义样式

SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">

   <view>自定义样式</view>

   </view>

   <tabs 

   class="border-bottom"

   tabs-background-color="#3388ff"

   tabs-underline-color="#fff"

   tabs-inactive-text-color="#fff"

   tabs-active-text-color="#fff"

   bindtabchange="tabsThree"

   active-name="{{activeNameThree}}">

   <tab-item s-for="tab in tabsThree" name="{{tab.name}}" label="{{tab.label}}" />

   </tabs>

   <view class="intro">

   <view>标签{{contentThree}}内容展示区</view>

   </view>

   </view>

  </view>


 

  Page({

   data: {

   tabsThree: [{

   name: '一',

   label: '标签一',

   }, {

   name: '二',

   label: '标签二',

   }, {

   name: '三',

   label: '标签三'

   }],

   contentThree: '一',

   activeNameThree: '一'

   },

   tabsThree(e) {

   this.setData({

   contentThree: e.detail.name,

   activeNameThree: e.detail.name

   })

   }

  });

设计指南

自定义样式时需使用合适的颜色明确区分子项（tab-item）的选中态和非选中态，并且为标签栏设计适当的背景色（tabs-background-color），保证其内容显示清晰。

错误

选中态和非选中态的内容颜色无区分或颜色过多，均会影响阅读效率

错误

背景与内容的配色不协调，过多使用高饱和度或颜色过于相近，均会降低阅读舒适度

代码示例 4：显示徽标

SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">

   <view>显示徽标</view>

   </view>

   <tabs 

   class="border-bottom" 

   bindtabchange="tabsFour"

   active-name="{{activeNameFour}}">

   <tab-item 

   s-for="tab in tabsFour" 

   badge-type="{{tab.badgeType}}" 

   badge-text="{{tab.badgeText}}"

   name="{{tab.name}}" 

   label="{{tab.label}}" />

   </tabs>

   <view class="intro">

   <view>标签{{contentFour}}内容展示区</view>

   </view> 

   </view> 

  </view>


 

  Page({

   data: {

   tabsFour: [{

   name: '一',

   label: '标签一',

   badgeType: 'text',

   badgeText: '99+'

   }, {

   name: '二',

   label: '标签二',

   badgeType: 'dot'

   }, {

   name: '三',

   label: '标签三'

   }],

   contentFour: '一',

   activeNameFour: '一'

   },

   tabsFour(e) {

   this.setData({

   contentFour: e.detail.name,

   activeNameFour: e.detail.name

   })

   }

  });

设计指南

为徽标设置合理的消失机制，例如点击对应子项时徽标消失。不建议同时使用多种徽标，以及徽标长期不消失干扰用户。

正确

徽标长度控制在 3 个字符内体验最佳

错误

同时使用多种徽标且长期不消失，影响使用

代码示例 5：跳转寻址

旧页面：
SWAN
JS


 

  <view class="wrap">

   <view class="card-area">

   <view class="top-description border-bottom">

   <view>支持寻址</view>

   </view>

   <button type="primary" bind:tap="enterNewTabsPage">进入页面并定位到标签二</button>

   </view>

  </view>


 

  Page({

   data: {

   tabsFour: [{

   name: '一',

   label: '标签一',

   badgeType: 'text',

   badgeText: '99+'

   }, {

   name: '二',

   label: '标签二',

   badgeType: 'dot'

   }, {

   name: '三',

   label: '标签三'

   }],

   contentFour: '一'

   },

   enterNewTabsPage() {

   swan.navigateTo({

   url: "/newTabs/newTabs?position=二"

   });

   }

  });

新页面：
SWAN
JS


 

  <tabs url-query-name="position" class="border-bottom">

   <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />

  </tabs>


 

  Page({

   data: {

   tabs: [{

   name: '一',

   label: '标签一'

   }, {

   name: '二',

   label: '标签二'

   }, {

   name: '三',

   label: '标签三'

   }],

   content: '一'

   },

   onLoad(query) {

   swan.setURLQuery(query);

   this.setData({

   content: query.position

   });

   },

   onURLQueryChange({newURLQuery, oldURLQuery}) {

   console.log(oldURLQuery, newURLQuery);

   this.setData({

   content: `${newURLQuery.position}`

   });

   }

  });

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

SWAN
JS


 

  <!-- 指定 url-query-name 后，通过修改url来控制当前选中的tab，无需指定 active-name -->

  <!-- 虽然 bindtabchange 依旧会生效，但是直接使用 onURLQueryChange 是更好的做法 -->

  <tabs url-query-name="city">

   <tab-item s-for="tab in tabs" name="{{tab.name}}" label="{{tab.label}}" />

  </tabs>

  <!-- 查看页面uri变化 -->

  <view class="wrap">{{content}}</view>


 

  Page({

   data: {

   tabs: [{

   name: 'guangzhou',

   label: '广州'

   }, {

   name: 'shenzhen',

   label: '深圳'

   }, {

   name: 'xiamen',

   label: '厦门'

   }, {

   name: 'haerbin',

   label: '哈尔滨'

   }],

   content: 'beijing'

   },

   // 监听函数，点击切换 tabs 组件或者调用 swan.setURLQuery 时，url 发生变化自动触发

   onURLQueryChange({newURLQuery, oldURLQuery}) {

   console.log(newURLQuery, oldURLQuery)

   this.setData({

   content: `${oldURLQuery.city || 'beijing'} To ${newURLQuery.city}`

   })

   // 此时tab切换，刷新tabs下方视图数据

   }

  });

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

如果开发者需要的只是一个普通的顶部标签栏组件，可以通过 active-name 配合 bindtabchange 来控制当前选中 tab-item ；

如果开发者需要的是可以修改页面 url 的顶部标签栏组件，只需指定 url-query-name，无需设置 active-name 。

Bug & Tip

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

九八云百度小程序教程：tabs 标签栏

tabs 标签栏

属性说明

示例

代码示例 1：默认样式

代码示例 2：可横滑展示

代码示例 3：自定义样式

代码示例 4：显示徽标

代码示例 5：跳转寻址

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

Bug & Tip

相关推荐

攻防案列

热门文章