支付宝小程序API TabBar

2020-09-14 11:21 更新

tabBar 使用说明

多 tab 小程序(小程序的底部栏可以切换页面)可以通过tabBar配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

注意:

  • 通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。
  • tabBar 的第一个页面必须是首页。
  • tabBar 的 icon 暂不支持 gif 动画。

tabBar 配置

属性 类型 必填 描述
textColor HexColor 文字颜色。
selectedColor HexColor 选中文字颜色。
backgroundColor HexColor 背景色。
items Array 每个 tab 的配置。单个 item 的配置属性见下表。

item 配置

属性 类型 必填 描述
pagePath String 设置页面路径。
name String 名称。
icon String 平常图标路径。icon 推荐图片尺寸为 60*60px ,系统会对任意传入的图片非等比拉伸/缩放。
activeIcon String 高亮图标路径。

示例代码

{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日志"      }
    ]
  }
}

my.hideTabBar

简介

my.hideTabBar 是隐藏标签页(tabbar)的 API。

相关问题请参见tabBar常见问题。

使用限制

基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理

示例代码

// .js
my.hideTabBar({
    animation: true
})

入参

Object 类型,属性如下:

属性 类型 必填 描述
animation Boolean 是否需要动画效果,默认为无动画效果。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.hideTabBarRedDot

简介

my.hideTabBarRedDot 是隐藏标签页(tabbar)某一项右上角的红点的 API。

相关问题请参见tabBar 常见问题。

使用限制

  • 基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理
  • IDE 模拟器 1.13 及以上版本支持该接口调用。

接口调用

示例代码

// .js
my.hideTabBarRedDot({
  index: 0
})

入参

Object 类型,属性如下:

属性 类型 必填 描述
index Number 标签页的项数序号,从左边开始计数。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.removeTabBarBadge

简介

my.removeTabBarBadge 是移除标签页(tabbar)某一项右上角的文本的 API。

相关问题请参见 tabBar 常见问题。

使用限制

  • 基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理
  • IDE 模拟器 1.13 及以上版本支持该接口调用。

接口调用

示例代码

// .js
my.removeTabBarBadge({
  index: 0
})

入参

Object 类型,属性如下:

属性 类型 必填 描述
index Number 标签页的项数序号,从左边开始计数。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.setTabBarBadge

简介

my.setTabBarBadge 是为标签页(tabbar)某一项的右上角添加文本的 API。可用于设置消息条数的红点提醒。

相关问题请参见 tabBar 常见问题。

使用限制

  • 基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理
  • IDE 模拟器 1.13 及以上版本支持该接口调用。

效果示例

settabbarbage.png

接口调用

示例代码

// .js
my.setTabBarBadge({
  index: 0,
  text: '42'
})

入参

Object 类型,属性如下:

属性 类型 必填 描述
index Number 标签页的项数序号,从左边开始计数。
text String 显示的文本,超过三个字符则显示前两个字符+“…”。例如:“支付宝”显示“支付宝”,“蚂蚁金服”显示“蚂蚁…”。
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

my.setTabBarItem

简介

my.setTabBarItem 是动态设置标签页(tabbar)某一项的内容的 API。

相关问题请参见tabBar 常见问题

使用限制

  • 基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理
  • IDE 模拟器 1.13 及以上版本支持该接口调用。

接口调用

示例代码

//  .js
my.setTabBarItem({
    index: 0,
    text: 'text',
    iconPath: '/image/iconPath',
    selectedIconPath: '/image/selectedIconPath'
})

入参

Object 类型,属性如下:

属性 类型 必填 描述
index Number 标签页的项数序号,从左边开始计数。
text String 标签页按钮上的文字。
iconPath String 图片路径,建议尺寸为 81px * 81px,支持 png/jpeg/jpg/gif 图片格式,支持网络图片。
selectedIconPath String 选中时的图片路径,建议尺寸为 81px * 81px,支持 png/jpeg/jpg/gif 图片格式,支持网络图片。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.setTabBarStyle

简介

my.setTabBarStyle 是动态设置标签页(tabbar)的整体样式的 API,如文字颜色、标签背景色、标签边框颜色等。

相关问题请参见 tabBar 常见问题。

使用限制

  • 基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理
  • IDE 模拟器 1.13 及以上版本支持该接口调用。

接口调用

示例代码

// .js
my.setTabBarStyle({
    color: '#FF0000',
    selectedColor: '#00FF00',
    backgroundColor: '#0000FF',
    borderStyle: 'white'
})

入参

Object 类型,属性如下:

属性 类型 必填 描述
color HexColor 标签(tab)上的文字默认颜色。
selectedColor HexColor 标签(tab)上的文字选中时的颜色。
backgroundColor HexColor 标签(tab)的背景色。
borderStyle String 标签页(tabbar)上边框的颜色, 仅支持 black 、 white 。
success Function 接口调用成功的回调函数。
fail Function 接口调用失败的回调函数。
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)。

my.showTabBar

简介

my.showTabBar 是显示标签页(tabbar)的 API。

相关问题请参见 tabBar 常见问题。

使用限制

基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理

接口调用

示例代码

// .js
my.showTabBar({
    animation: true
})

入参

Object 类型,属性如下:

属性 类型 必填 描述
animation Boolean 是否需要动画效果,默认为无动画效果。
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

my.showTabBarRedDot

简介

my.showTabBarRedDot 是显示标签页(tabbar)某一项右上角的红点的 API。

相关问题请参见 tabBar 常见问题。

使用限制

  • 基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理
  • IDE 模拟器 1.13 及以上版本支持该接口调用。

接口调用

示例代码

// .js
my.showTabBarRedDot({
  index: 0
})

入参

Object 类型,属性如下:

属性 类型 必填 描述
index Number 标签页的项数序号,从左边开始计数。
success Function 调用成功的回调函数
fail Function 调用失败的回调函数
complete Function 调用结束的回调函数(调用成功、失败都会执行)

onTabItemTap

简介

onTabItemTap 是点击标签(tab)时触发,可用于监听 tabBar 的点击事件。

相关问题请参见 tabBar 常见问题。

使用限制

基础库 1.11.0 或更高版本;支付宝客户端 10.1.32 或更高版本,若版本较低,建议采取 兼容处理

接口调用

示例代码

//.js
Page({
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})

tabBar 常见问题

功能支持类 FAQ

Q:tabBar 的位置是否支持设置成顶部?

A:tabBar 的位置暂不支持自定义设置。

Q:如何监听 tabBar 点击事件?

A:在小程序页面中用 onTabItemTap 即可监听 tabBar 点击事件。

Q:tabBar 的 icon 图标是否支持 svg 格式?

A:不支持 svg 格式,只支持 png/jpeg/jpg/gif 图片格式。

Q:如何设置 tab 的样式?

A:可以在 JSON 文件中直接设置样式(示例代码如下所示),或者调用 my.setTabBarStyle API 进行设置。

  "tabBar": {
    "textColor": "#404040",
    "selectedColor": "#108ee9",
    "backgroundColor": "#F5F5F9"
  }

请求异常类 FAQ

Q:切换 tabBar 时报错“Cannot read property 'getCurrentPages' of undefined”,如何处理?

A:tabBar 路径错误导致,请检查 tabBar 路径。

Q:跳转页面后,为何不显示 tabBar 呢?

A:通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,不会显示底部的 tab 栏。另外,tabBar 的第一个页面必须是首页。

Q:小程序进入 tabBar 页面,如何获取上一级页面路径呢?

A:在进入页面的时候将当前页面路径存入全局,在切换 tabBar 页面的时候拿全局的地址属性即可获取上一级页面路径。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号