×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：tabs标签栏

tabs 标签栏

基础库 3.100.4 版本开始支持。

创新互联公司主要从事成都网站设计、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务巴州,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

解释：标签栏，用于让用户在不同的视图中进行切换。标签栏组件的使用需要通过 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：默认样式

 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  默认样式
    4.   
  
  
  4.  
    5.   
  
  
  5.  class="border-bottom"
    6.   
  
  
  6.  active-name="{{activeNameOne}}"
    7.   
  
  
  7.  bindtabchange="tabsOne">
    8.   
  
  
  8.  
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.   
  
  
  11.  标签{{content}}内容展示区
    12.   
  
  
  12.  
    13.   
  
  
  13.  
    14.   
  
  
    15.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  tabs: [{
    4.   
  
  
  4.  name: '一',
    5.   
  
  
  5.  label: '标签一'
    6.   
  
  
  6.  }, {
    7.   
  
  
  7.  name: '二',
    8.   
  
  
  8.  label: '标签二'
    9.   
  
  
  9.  }, {
    10.   
  
  
  10.  name: '三',
    11.   
  
  
  11.  label: '标签三'
    12.   
  
  
  12.  }],
    13.   
  
  
  13.  content: '一',
    14.   
  
  
  14.  activeNameOne: '一'
    15.   
  
  
  15.  },
    16.   
  
  
  16.  tabsOne(e) {
    17.   
  
  
  17.  this.setData({
    18.   
  
  
  18.  content: e.detail.name,
    19.   
  
  
  19.  activeNameOne: e.detail.name
    20.   
  
  
  20.  })
    21.   
  
  
  21.  }
    22.   
  
  
  22. });
    23.

设计指南

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

错误

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

错误

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

代码示例 2：可横滑展示

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  可横滑显示
    5.   
  
  
  5.  max-tab-item-amount="5"
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  class="border-bottom" 
    9.   
  
  
  9.  active-name="{{activeNameTwo}}"
    10.   
  
  
  10.  max-tab-item-amount="5"
    11.   
  
  
  11.  bindtabchange="tabsTwo">
    12.   
  
  
  12.  
    13.   
  
  
  13.  
    14.   
  
  
  14.  
    15.   
  
  
  15.  标签{{contentTwo}}内容展示区
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
    19.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  tabsTwo: [{
    4.   
  
  
  4.  name: '一',
    5.   
  
  
  5.  label: '标签一'
    6.   
  
  
  6.  }, {
    7.   
  
  
  7.  name: '二',
    8.   
  
  
  8.  label: '标签二'
    9.   
  
  
  9.  }, {
    10.   
  
  
  10.  name: '三',
    11.   
  
  
  11.  label: '标签三'
    12.   
  
  
  12.  }, {
    13.   
  
  
  13.  name: '四',
    14.   
  
  
  14.  label: '标签四'
    15.   
  
  
  15.  }, {
    16.   
  
  
  16.  name: '五',
    17.   
  
  
  17.  label: '标签五'
    18.   
  
  
  18.  }, {
    19.   
  
  
  19.  name: '六',
    20.   
  
  
  20.  label: '标签六'
    21.   
  
  
  21.  }, {
    22.   
  
  
  22.  name: '七',
    23.   
  
  
  23.  label: '标签七'
    24.   
  
  
  24.  }],
    25.   
  
  
  25.  contentTwo: '一',
    26.   
  
  
  26.  activeNameTwo: '一'
    27.   
  
  
  27.  },
    28.   
  
  
  28.  tabsTwo(e) {
    29.   
  
  
  29.  this.setData({
    30.   
  
  
  30.  contentTwo: e.detail.name,
    31.   
  
  
  31.  activeNameTwo: e.detail.name
    32.   
  
  
  32.  })
    33.   
  
  
  33.  }
    34.   
  
  
  34. });
    35.

代码示例 3：自定义样式

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  自定义样式
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  class="border-bottom"
    8.   
  
  
  8.  tabs-background-color="#3388ff"
    9.   
  
  
  9.  tabs-underline-color="#fff"
    10.   
  
  
  10.  tabs-inactive-text-color="#fff"
    11.   
  
  
  11.  tabs-active-text-color="#fff"
    12.   
  
  
  12.  bindtabchange="tabsThree"
    13.   
  
  
  13.  active-name="{{activeNameThree}}">
    14.   
  
  
  14.  
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
  17.  标签{{contentThree}}内容展示区
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
    21.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  tabsThree: [{
    4.   
  
  
  4.  name: '一',
    5.   
  
  
  5.  label: '标签一',
    6.   
  
  
  6.  }, {
    7.   
  
  
  7.  name: '二',
    8.   
  
  
  8.  label: '标签二',
    9.   
  
  
  9.  }, {
    10.   
  
  
  10.  name: '三',
    11.   
  
  
  11.  label: '标签三'
    12.   
  
  
  12.  }],
    13.   
  
  
  13.  contentThree: '一',
    14.   
  
  
  14.  activeNameThree: '一'
    15.   
  
  
  15.  },
    16.   
  
  
  16.  tabsThree(e) {
    17.   
  
  
  17.  this.setData({
    18.   
  
  
  18.  contentThree: e.detail.name,
    19.   
  
  
  19.  activeNameThree: e.detail.name
    20.   
  
  
  20.  })
    21.   
  
  
  21.  }
    22.   
  
  
  22. });
    23.

设计指南

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

错误

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

错误

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

代码示例 4：显示徽标

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  显示徽标
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  class="border-bottom" 
    8.   
  
  
  8.  bindtabchange="tabsFour"
    9.   
  
  
  9.  active-name="{{activeNameFour}}">
    10.   
  
  
  10.  
    11.   
  
  
  11.  s-for="tab in tabsFour" 
    12.   
  
  
  12.  badge-type="{{tab.badgeType}}" 
    13.   
  
  
  13.  badge-text="{{tab.badgeText}}"
    14.   
  
  
  14.  name="{{tab.name}}" 
    15.   
  
  
  15.  label="{{tab.label}}" />
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
  18.  标签{{contentFour}}内容展示区
    19.   
  
  
  19.   
    20.   
  
  
  20.   
    21.   
  
  
    22.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  tabsFour: [{
    4.   
  
  
  4.  name: '一',
    5.   
  
  
  5.  label: '标签一',
    6.   
  
  
  6.  badgeType: 'text',
    7.   
  
  
  7.  badgeText: '99+'
    8.   
  
  
  8.  }, {
    9.   
  
  
  9.  name: '二',
    10.   
  
  
  10.  label: '标签二',
    11.   
  
  
  11.  badgeType: 'dot'
    12.   
  
  
  12.  }, {
    13.   
  
  
  13.  name: '三',
    14.   
  
  
  14.  label: '标签三'
    15.   
  
  
  15.  }],
    16.   
  
  
  16.  contentFour: '一',
    17.   
  
  
  17.  activeNameFour: '一'
    18.   
  
  
  18.  },
    19.   
  
  
  19.  tabsFour(e) {
    20.   
  
  
  20.  this.setData({
    21.   
  
  
  21.  contentFour: e.detail.name,
    22.   
  
  
  22.  activeNameFour: e.detail.name
    23.   
  
  
  23.  })
    24.   
  
  
  24.  }
    25.   
  
  
  25. });
    26.

设计指南

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

正确

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

错误

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

代码示例 5：跳转寻址

  • 旧页面：

  • SWAN

  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  支持寻址
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
    9.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  tabsFour: [{
    4.   
  
  
  4.  name: '一',
    5.   
  
  
  5.  label: '标签一',
    6.   
  
  
  6.  badgeType: 'text',
    7.   
  
  
  7.  badgeText: '99+'
    8.   
  
  
  8.  }, {
    9.   
  
  
  9.  name: '二',
    10.   
  
  
  10.  label: '标签二',
    11.   
  
  
  11.  badgeType: 'dot'
    12.   
  
  
  12.  }, {
    13.   
  
  
  13.  name: '三',
    14.   
  
  
  14.  label: '标签三'
    15.   
  
  
  15.  }],
    16.   
  
  
  16.  contentFour: '一'
    17.   
  
  
  17.  },
    18.   
  
  
  18.  enterNewTabsPage() {
    19.   
  
  
  19.  swan.navigateTo({
    20.   
  
  
  20.  url: "/newTabs/newTabs?position=二"
    21.   
  
  
  21.  });
    22.   
  
  
  22.  }
    23.   
  
  
  23. });
    24.

  • 新页面：

  • SWAN

  • JS
 
 
 
    
  
  
  
    2.   
  
  
  2.  
    3.   
  
  
    4.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  tabs: [{
    4.   
  
  
  4.  name: '一',
    5.   
  
  
  5.  label: '标签一'
    6.   
  
  
  6.  }, {
    7.   
  
  
  7.  name: '二',
    8.   
  
  
  8.  label: '标签二'
    9.   
  
  
  9.  }, {
    10.   
  
  
  10.  name: '三',
    11.   
  
  
  11.  label: '标签三'
    12.   
  
  
  12.  }],
    13.   
  
  
  13.  content: '一'
    14.   
  
  
  14.  },
    15.   
  
  
  15.  onLoad(query) {
    16.   
  
  
  16.  swan.setURLQuery(query);
    17.   
  
  
  17.  this.setData({
    18.   
  
  
  18.  content: query.position
    19.   
  
  
  19.  });
    20.   
  
  
  20.  },
    21.   
  
  
  21.  onURLQueryChange({newURLQuery, oldURLQuery}) {
    22.   
  
  
  22.  console.log(oldURLQuery, newURLQuery);
    23.   
  
  
  23.  this.setData({
    24.   
  
  
  24.  content: `${newURLQuery.position}`
    25.   
  
  
  25.  });
    26.   
  
  
  26.  }
    27.   
  
  
  27. });
    28.

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

  • SWAN
  • JS
 
 
 
    
  
  
  
    2.   
  
  
    3.   
  
  
    4.   
  
  
  4.  
    5.   
  
  
    6.   
  
  
    7.   
  
  
  7. {{content}}
    8.  
 
 
 
 
 
    
  
  
  
  1. Page({
    2.   
  
  
  2.  data: {
    3.   
  
  
  3.  tabs: [{
    4.   
  
  
  4.  name: 'guangzhou',
    5.   
  
  
  5.  label: '广州'
    6.   
  
  
  6.  }, {
    7.   
  
  
  7.  name: 'shenzhen',
    8.   
  
  
  8.  label: '深圳'
    9.   
  
  
  9.  }, {
    10.   
  
  
  10.  name: 'xiamen',
    11.   
  
  
  11.  label: '厦门'
    12.   
  
  
  12.  }, {
    13.   
  
  
  13.  name: 'haerbin',
    14.   
  
  
  14.  label: '哈尔滨'
    15.   
  
  
  15.  }],
    16.   
  
  
  16.  content: 'beijing'
    17.   
  
  
  17.  },
    18.   
  
  
  18.  // 监听函数，点击切换 tabs 组件或者调用 swan.setURLQuery 时，url 发生变化自动触发
    19.   
  
  
  19.  onURLQueryChange({newURLQuery, oldURLQuery}) {
    20.   
  
  
  20.  console.log(newURLQuery, oldURLQuery)
    21.   
  
  
  21.  this.setData({
    22.   
  
  
  22.  content: `${oldURLQuery.city || 'beijing'} To ${newURLQuery.city}`
    23.   
  
  
  23.  })
    24.   
  
  
  24.  // 此时tab切换，刷新tabs下方视图数据
    25.   
  
  
  25.  }
    26.   
  
  
  26. });
    27.

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

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

相关链接：onURLQueryChange

Bug & Tip

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

当前标题：创新互联百度小程序教程：tabs标签栏
文章源于：http://cdbrznjsb.com/article/dpigshh.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务