微信小程序的自定义 tabBar 是通过在 app.json 文件中的 "tabBar" 字段进行配置实现的。以下是一个简单的例子，展示如何自定义 tabBar：

首先，在 app.json 中定义 tabBar：
{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#00a8ff",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tab_home.png",
        "selectedIconPath": "images/tab_home_selected.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "images/tab_category.png",
        "selectedIconPath": "images/tab_category_selected.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/tab_my.png",
        "selectedIconPath": "images/tab_my_selected.png"
      }
    ]
  }
}

上述代码中，我们设置了 "custom" 字段为 true，表示启用自定义 tabBar。然后，通过 "list" 数组定义了每个 tabBar 的页面路径、显示文本、图标路径等信息。你需要在项目中提供相应的图标文件，并根据实际需要修改页面路径等参数。

在每个页面的 json 文件中，可以通过设置 "navigationBarTitleText" 字段来定义页面顶部的标题。



转载请注明出处：http://www.zyzy.cn/article/detail/651/微信小程序