微信小程序——自定义底部tabBar，微信小程序，自定义底部tabBar功能详解

微信小程序推出自定义底部tabBar功能，让用户可以个性化设置底部导航栏。通过简单的配置和操作，用户可以自定义tabBar的样式、图标和布局，提升用户体验。这一功能丰富了小程序界面的可能性，让小程序更加符合用户的使用习惯和审美需求。自定义底部tabBar不仅能提高用户的使用便捷性，也能为小程序开发者提供更多创新空间，推动小程序的发展和应用。

目录

实现步骤

1. 配置信息

2. 添加代码文件

3. 在该目录下编写代码

4. 在app.json里添加tabBar配置

5. 在custom-tab-bar添加配置

* 创建目录结构

* 为index.wxml添加tabBar的结构代码

6. 关于canvas组件的层级问题

实现步骤

配置信息

需要在app.json中设置一个属性custom，值为true，代表全局开启自定义tabBar。

注意：设置custom属性后，tabBar下的list数组不能删除，文档指出需要保持完整的配置项，以便在低版本中使用非自定义tabBar。

添加代码文件

代码文件的目录结构是固定的，必须在项目根目录创建一个文件夹：custom-tab-bar，以及对应的文件，当custom设置为true时，小程序会自动读取该目录下的index组件，将其渲染为tab。

在该目录下编写代码

在custom-tab-bar目录下，编写相关的JS、JSON、WXML和WXSS文件。

4. 在app.json里添加tabBar配置

示例：

"pages": [
  "pages/index/index",
  "pages/logs/logs",
  "pages/goods/index"
],
"tabBar": {
  "custom": true,
  "color": "#000000",
  "selectedColor": "#000000",
  "backgroundColor": "#000000",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/goods/index",
      "text": "商品"
    }
  ]
}

5. 在custom-tab-bar添加配置

创建目录结构：custom-tab-bar/index.js、custom-tab-bar/index.json、custom-tab-bar/index.wxml、custom-tab-bar/index.wxss。

关于canvas组件的层级问题

1、为什么canvas组件总是在最上层？

由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置z-index为多少，都无法覆盖在原生组件上。

2、如何解决canvas层级最高问题？

一种解决方法是使用原生组件覆盖原生组件，小程序提供了cover-view和cover-image组件，可以覆盖在部分原生组件上面，这两个组件也是原生组件，但使用限制与其他原生组件有所不同，cover-view只支持嵌套cover-view、cover-image、button，具体使用方式可查阅微信官方文档。