甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

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

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

    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：默认样式

    • SWAN
    • JS
     
 
 
      
  
  
  
      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标签栏
    本文网址：https://chengdu.cdxwcx.cn/article/dpigshh.html

    其他资讯