tabs 标签栏

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

属性说明

属性名类型默认值必填说明最低版本
tabs-background-colorString'#fff'tabs 背景色,必须填写十六进制颜色3.100.4低版本请做兼容性处理
tabs-active-text-colorString'#000'tabs 激活 tab-item 文字颜色3.100.4低版本请做兼容性处理
tabs-inactive-text-colorString'#666'tabs 非激活 tab-item 文字颜色3.100.4低版本请做兼容性处理
tabs-underline-colorString'#333'tabs 激活 tab-item 下划线颜色3.100.4低版本请做兼容性处理
active-nameString仅用于普通标签栏组件,当前激活 tab-item 的 对应的name 值,须搭配bindtabchange 一起使用。3.100.4低版本请做兼容性处理
url-query-nameString仅用于可寻址标签栏组件,当前 tab 所改变的 url query 中参数 key,需要通过 tabs 修改页面 url 的时候设置。3.100.4低版本请做兼容性处理
max-tab-item-amountNumber5当前 tabs 视图中最多容纳的 tab-item 数量,低于此数量均分排列,超出此数量划屏。默认五个,开发者根据业务需求调整3.100.4低版本请做兼容性处理
bindtabchangeEventHandletab 被点击的回调,可以在e.detail.name中取到当前点击的tab-item对应name值3.100.4低版本请做兼容性处理

示例

在开发者工具中预览效果

扫码体验

tabs 标签栏 - 图1请使用百度APP扫码

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

代码示例 1 :普通标签栏(默认样式)

  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 :可横滑展示

  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 :自定义样式

  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 :显示徽标

  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 :跳转寻址

  • 旧页面:
  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. });
  • 新页面:
  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>
Page({
    data: {
        tabs: [{
            name: '一',
            label: '标签一'
        }, {
            name: '二',
            label: '标签二'
        }, {
            name: '三',
            label: '标签三'
        }],
        content: '一'
    },
    onLoad(query) {
        console.log(query);
        swan.setURLQuery(query);
        this.setData({
            content: query.position
        });
    },
    onURLQueryChange({newURLQuery, oldURLQuery}) {
        console.log(oldURLQuery, newURLQuery);
        this.setData({
            content: `${newURLQuery.position}`
        });
    }
});

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

<!-- 指定 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>
        {
            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

相关链接 :onURLQueryChangetabs 标签栏 - 图3

Bug & Tip

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