微信小程序自定义tabBar

最新推荐文章于 2025-04-23 15:31:11 发布

liuye066

最新推荐文章于 2025-04-23 15:31:11 发布

阅读量2.3k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/liuye066/article/details/123661757

版权

效果：

第一种方法：（使用微信小程序官网的示例代码修改）

1. 在代码根目录下添加入口文件:

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

具体步骤：

在代码根目录下新建文件夹custom-tab-bar，然后在文件夹上右击选择”新建Component"，取名index后回车，就会新建这4个文件。

2. app.json中添加tabBar的设置：

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/shop/shop",
    "pages/begin/begin",
    "pages/member/member",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/shop/shop",
      "text": "门店"
    },
    {
      "pagePath": "pages/begin/begin",
      "text": "开台"
    },
    {
      "pagePath": "pages/member/member",
      "text": "人员"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "个人中心"
    }
  ]
  }
}

3. custom-tab-bar/index.wxml