tabs 标签栏

解释:标签栏,用于让用户在不同的视图中进行切换。标签栏组件的使用需要通过 tabs 和 tab-item 组件配合实现。基础库 3.100.4 版本开始支持。设计文档详见 标签栏

建议开发者尽量使用可寻址标签栏栏组件实现页面主标签栏栏功能。可寻址标签栏组件在标签栏 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
低版本请做兼容性处理

# 示例

# 扫码体验

扫码体验
重新加载
请使用百度APP扫码

# 代码示例 1 :默认样式

    <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
            })
        }
    });
    

    设计指南

    DESIGN

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

    错误
    只有1个子项时请不要使用 tabs。
    错误
    内容过长出现折行不美观,影响阅读体验。

    # 代码示例 2 :可横滑展示

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

        <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
                })
            }
        });
        

        设计指南

        DESIGN

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



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



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


        # 代码示例 4 :显示徽标

          <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
                  })
              }
          });
          

          设计指南

          DESIGN

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



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



          错误
          同时使用多种徽标且长期不消失,影响使用。


          # 代码示例 5 :跳转寻址

          • 旧页面:
            <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=二"
                    });
                }
            });
            
            • 新页面:
              <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 :可寻址标签栏用法

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

                相关链接 :
                onURLQueryChange

                # Bug & Tip

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