自定义 tabbar -凯发app官方网站

框架概述

目录结构

native 渲染

性能与优化

小程序全局配置

acss 语法参考

小程序页面

axml

sjs 语法参考

事件系统

自定义组件

基础能力

文件系统

小程序全局 / 页面参数设置以及解析细节

分包

基础库

基础库更新日志

更新时间：2024-09-24 11:36:24

订阅更新

我的文档

设置

简介

作为支付宝小程序基础能力，提供底部操作栏进行切换页面。自定义 tabbar 作为补充能力，可以让开发者更加灵活地设置 tabbar，以满足更多个性化的场景。

在自定义 tabbar 模式下：

●

开发者需要提供一个自定义组件来进行 tabbar 的渲染及交互。

●

与 tabbar 样式相关的接口将失效。如

my.hidetabbar

等。

●

每个页面的 tabbar 组件实例是不同的，可通过

gettabbar

接口获取 tabbar 组件实例。

版本要求

●

基础库 2.7.20 及以上版本。

●

支付宝客户端 10.2.63 及以上版本。

●

小程序开发者工具

3.1.2 及以上版本。

若版本较低，则显示原始 tabbar，为保证兼容性，tabbar 的相关配置

建议完整声明

。

使用流程

1. 配置信息

在现有 tabbar 配置基础上新增

customize

字段。

app.json 示例

{

"pages": [

"pages/index/index",

"pages/index2/index"

"tabbar": {

"customize": true,

"items": [

{

"pagepath": "pages/index/index",

"name": "tab 1"

{

"pagepath": "pages/index2/index",

"name": "tab 2"

}

]

}

2. 添加 tabbar 文件

约定在代码根目录下添加 tabbar 入口文件。

3. 编写 tabbar 代码

编码规范可查看

自定义组件

。该自定义组件将完全接管 tabbar 的渲染及交互，同时，新增

gettabbar

接口可获取自定义 tabbar 组件实例。

示例代码

customize-tab-bar/index.axml

customize-tab-bar/index.js

pages/index/index.js

说明

：页面切换时，开发者需要手动更新相应的自定义 tabbar 的状态。例如切换自定义 tabbar 时，改变选中态和高亮颜色：

自定义 tabbar 原生渲染模式

自定义 tabbar 为开发者带来了开发更具表现力的 tabbar 能力，但对比原生 tabbar，存在一些体验问题。

自定义 tabbar 由于渲染在页面视图内，所以在点击 tabbar 切换页面时，tabbar 存在

闪烁

问题。

同理，当启用页面下拉刷新时，tabbar 将在整个页面下拉过程中跟随移动，导致部分不可见。

效果对比：

操作	普通自定义 tabbar	native 自定义 tabbar
切换页面
下拉刷新

造成上述效果差异的原因在于普通自定义 tabbar 和 native 自定义 tabbar 在渲染模型上存在差异。native 自定义 tabbar 独立于页面且覆盖在页面之上，普通自定义 tabbar 跟随页面一起渲染。

如何启用

这是一种特殊的自定义 tabbar 运行模式，开发者可通过修改

app.json

内的

tabbar

字段配置启用。

注意

：如未配置

customize:true

，则

overlay:true

配置无效。

配置完成后，框架将在小程序运行环境允许的情况下自动将自定义 tabbar 渲染为 native 模式。

调试预览

虽然 native 自定义 tabbar 开发范式与普通自定义 tabbar 完全一致，但由于使用了 native 渲染引擎，所以在诸如样式支持度及基础组件支持度上与普通自定义 tabbar 存在差异，所以在配置完成后，开发者需要手动确认其表现是否符合预期。

由于目前不支持在 ide 模拟器内预览调试 native 自定义 tabbar，开发者需要通过

真机预览

或

真机调试

进行预览和测试。

请使用以下环境进行：

●

基础库 2.9.10 及以上。

●

支付宝客户端 10.5.70 及以上。

运行时检测

当配置

overlay:true

后，原本「自定义 tabbar 」的

接口

this.gettabbar()

返回的自定义组件实例上，会新增一个属性

overlay: boolean

。

兼容性处理

可根据上述

this.gettabbar().overlay

判断目前所处于的渲染模式，用于处理新老模式之间的差异。

在不满足运行条件时，均会自动降级至普通版本的自定义 tabbar。

弹层覆盖

由于

渲染模型之间的差异，当开发者将自定义 tabbar 切换到 native 渲染后，需要重点关注业务中的弹层与自定义 tabbar 的相互覆盖关系。

开发者通过

axml

代码显示的弹层均将被 native 自定义 tabbar 覆盖且通过修改自定义 tabbar 的

z-index

属性将无法做到调整覆盖层级。

普通自定义 tabbar	native 自定义 tabbar

说明

：目前阶段，需要开发者在显示弹层组件时，手动对 tabbar 内元素进行隐藏（如

a:if="{{visible}}"

）。

常见问题

q: 使用 native 自定义 tabbar 是否需要开启当前页面的 native 渲染？

a：不需要。在不开启页面的 native 渲染模式下，也可单独启用 native 自定义 tabbar。

q：遇到不支持的样式如何处理？

a: 样式支持度与 native 渲染一致，样式支持度文档将在近期对外开放。

注意事项

自定义 tabbar 默认

z-index:10000

，若不满足项目实际场景可通过类名

a-customize-tab-bar

进行覆盖。

native 自定义 tabbar 不支持该特性

。

相关问题