微信小程序自定义tabBar-加速度jsudo

微信小程序自定义tabBar

来源：加速度jsudo

作者

访问量 5389

本文摘要

为了让商家更灵活地设置小程序的样式，我们推荐使用微信小程序的自定义tabBar功能。下面将会介绍这个功能的使用流程，以及需要考虑的一些重要事项。 1. 配置信息在app.json文件中，您需要指定tabBar项的custom字段，并完整声明其余tabBar相关配置，以保证低版本兼容及正确渲染。另外，您需要在所有tab页的json里声明usingCompone

为了让商家更灵活地设置小程序的样式，我们推荐使用微信小程序的自定义tabBar功能。下面将会介绍这个功能的使用流程，以及需要考虑的一些重要事项。

1. 配置信息

在app.json文件中，您需要指定tabBar项的custom字段，并完整声明其余tabBar相关配置，以保证低版本兼容及正确渲染。另外，您需要在所有tab页的json里声明usingComponents项，或者在app.json全局开启。

以下是一个示例：

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

2. 添加tabBar代码文件

为了让自定义tabBar正常工作，您需要添加如下四个文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. 编写tabBar代码

您可以通过自定义组件的方式来编写tabBar的代码。在自定义模式下，所有tabBar的样式都由该自定义组件渲染。另外，您可以通过自定义组件下的getTabBar接口获取当前页面的自定义tabBar组件实例。

注意：如果需要实现tab选中态，在当前页面下，通过getTabBar接口获取组件实例，并调用setData更新选中态。

上一篇：微信小程序转发下一篇：微信小程序，流量大入口

****更多行业产品开发方案，请关注加速度JSUDO***

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

加速度JSUDO是一家企业级数字化解决方案提供商，专注于软件开发、网络营销、数字化转型咨询及云计算服务。核心业务包括定制化ERP/CRM系统、快速应用开发、大数据分析及物联网（IoT）解决方案，助力企业提升效率与智能化水平。服务覆盖制造业、零售、物流等多行业，致力于通过技术创新推动客户数字化转型。

添加客服微信获取更多内容