在小程序中使用自定义导航栏

最新推荐文章于 2024-07-30 13:02:28 发布

寂－浸－静

最新推荐文章于 2024-07-30 13:02:28 发布

阅读量254

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44904995/article/details/113875922

版权

本文介绍了在微信小程序中自定义导航栏的步骤，包括在app.json注册、创建custom-tab-bar文件夹及index组件，自定义样式和实现点击跳转功能，并提供了相关配置和官方文档链接。

摘要由CSDN通过智能技术生成

现需要做出这样的一个底部导航栏

很显然使用微信默认的导航栏是无法实现的，这时候需要自定义底部导航栏样式。方法如下

1.首先要在app.json中注册。

  "tabBar": {
    //custom属性设置为true，表示自定义导航栏开启
    "custom": true,
    //配置路径
    "list": [{
      "pagePath": "pages/index/index",
      "text": "树洞"
    },
    {
      "pagePath": "pages/person/person",
      "text": "我的"
    }]
  },

2.在项目根目录下（与pages同级），建立custom-tab-bar文件夹，然后在这个文件夹下创建一个名为index的组件，如下图所示。

注意：文件夹的位置和名称以及组建的名称都是固定的，不能更改，否则小程序无法识别！