微信小程序用tabBar实现页面导航

最新推荐文章于 2025-01-24 23:34:34 发布

永远的元子

最新推荐文章于 2025-01-24 23:34:34 发布

阅读量361

点赞数 5

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weald2000/article/details/145077757

很多时间，我们的微信小程序需要多个页面才能实现所需要的功能，这就要求多个页面之间能相互跳转，我们有很多种方式能实现这种功能，这里介绍一种页面不多的、较易实现的方式，那就是利用底部的tabBar实现页面导航。效果如下图所示：

实现起来也比较简单，按下面介绍，几步就能实现。

1、在app.json文件中添加如下代码：

"pages": [
    "pages/setting/setting",
    "pages/index/index",
    "pages/logs/logs",
    "pages/help/help"
  ],

 "tabBar": {
    "color": "#dddddd",
    "selectedColor": "#8D91FF",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/setting/setting",
        "iconPath": "icon/setting.png",
        "selectedIconPath": "icon/setting_active.png",
        "text": "设置"
      },
      {
        "pagePath": "pages/help/help",
        "iconPath": "icon/help.png",
        "selectedIconPath": "icon/help_active.png",
        "text": "帮助"
      },
      {
        "pagePath": "pages/index/