微信支持自定义导航栏，以实现灵活的底部导航栏。正式文档中给出了一个简单的描述，但不是太具体了。在这里，我将使用分步的特定代码实现来帮助每个人完成自定义底部导航栏的特定实现。跟着我获取特定的代码。

引入

// CO…

访问此URL并下载组件库

下载后，将文件夹放入演示文件夹中

设置简介

@import 'colorui/main.wxss'; @import 'colorui/icon.wxss'; @import 'colorui/animation.wxss'; 复制代码

将上述代码放入app.wxss文件（根据您的实际路径，以上代码路径填充）

它是成功引入的。我在这里使用了样式组件。实际上，其他事物是一样的，或者您可以自己编写底部导航栏的样式。

创建自定义底部导航栏组件

我们首先创建一个自定义组件文件夹** - Tab-bar。请记住，自定义底部导航栏的文件夹名称必须为此，不能更改为其他东西，否则小程序将无法识别它。

接下来，我们在下面创建两个页面（HOME，我），它们用作导航栏中的两个切换页面

app.json文件设置

不使用的默认导航栏设置，app.json文件中的属性设置为true

特定代码如下：

"tabBar": {     "custom": true,     "list": [       {         "pagePath": "pages/home/home",         "text": "首页",         "iconPath": "images/icon/basics.png",         "selectedIconPath": "images/icon/basics_cur.png"       },       {         "pagePath": "pages/my/my",         "text": "我的",         "iconPath": "images/icon/component.png",         "selectedIconPath": "images/icon/component_cur.png"       }     ]   }, 复制代码

应该在这里注意到，还需要设置列表。列表配置了您需要配置的特定选项卡页面。在这里，我只设置了两个选项卡，所以我有两个。配置了几种后，我必须在这里匹配其中的几个。他们都不会缺少。除列表外，还可以根据您的需求添加或减少其他字段。

编写特定的导航栏逻辑导航栏组件以实现组件的初始数据设置

**// custome-tab-bar/index.js** /**    * 组件的初始数据    */   data: {     selected: 0,     list: [{         "pagePath": "/pages/home/home",         "text": "首页",         "iconPath": "/images/icon/basics.png",         "selectedIconPath": "/images/icon/basics_cur.png"       },       {         "pagePath": "/pages/my/my",         "text": "我的",         "iconPath": "/images/icon/component.png",         "selectedIconPath": "/images/icon/component_cur.png"       }     ]   } 复制代码

在这里，您可以看到app.json中的设置大致相同，但是实际列表数据实际上是在此处获得的，并且App.json不会检索。这是实现自定义组件的关键。因此，您可能会有疑问。既然您无法使用app.json，为什么您仍然需要在app.json中设置它们？我在这里检查了。这是Mini计划的规范要求，我们只能遵循它。

组件导航栏页面代码实现

                        {{item.text}}    复制代码

这是使用的样式。我们将列表中每个数据的索引位与所选值进行比较，以实现按钮的样式切换效果，然后通过切换事件切换选项卡页面。

组件切换事件代码实现

/**    * 组件的方法列表    */   methods: {     switchTab(e) {

      const data = e.currentTarget.dataset       const url = data.path            wx.switchTab({         url       })       this.setData({         selected: data.index       })     }   } 复制代码

致电WX。 提供的方法可以完成URL跳跃，并在当时记录所选索引值。

编写本文后，我们组件的代码完成了。然后，特定页面还应设置按钮切换的相应逻辑。

特定页面代码实现

// pages/my/my.js /**    * 生命周期函数--监听页面显示    */   onShow: function () {     console.log("onShow")     if (typeof this.getTabBar === 'function' && this.getTabBar()) {       this.getTabBar().setData({         selected: 1       })     }   }, 复制代码

使用页面生命周期函数设置的值。因为我的页面是第二个选项卡，所以索引值设置为1。自定义组件微信有一个新接口，可以在当前页面下获得自定义组件实例，然后在组件中设置该值。还为主页制定了相同的设置，并且可以根据实际情况重定向索引值。

提出了最终效果

通过实现上述代码，实现了整个自定义底部导航栏，但是总体实现相对简单。让我们看看效果

如果您认为这篇文章对您有用，请喜欢并关注我，共享和一起学习