小程序底部导航TabBar

时间:2019-09-06
本文章向大家介绍小程序底部导航TabBar,主要包括小程序底部导航TabBar使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

底部的导航,在app.json 中配置,最多5个

"tabBar": {
    "selectedColor": "#000000",  // tab上文字选中时的颜色
    "backgroundColor": "#ffffff", // tab 的背景色
    "color": "#c7c7c7",  // tab 上的文字默认颜色
    "list": [
      {
        "selectedIconPath": "/images/tab/classic@highlight.png",  // 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。(选中时的图片)
        "pagePath": "pages/classic/classic",   // 页面路径,必须在 pages 中先定义
        "text": "流行",  //
        "iconPath": "/images/tab/classic.png"   // 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。(非选中的图片)
      },
      {
        "pagePath": "pages/book/book",
        "selectedIconPath": "/images/tab/book@highlight.png",
        "iconPath": "/images/tab/book.png",
        "text": "书籍"
      },
      {
        "pagePath": "pages/my/my",
        "selectedIconPath": "/images/tab/my@highlight.png",
        "iconPath": "/images/tab/my.png",
        "text": "喜欢"
      }
    ]
  }

原文地址:https://www.cnblogs.com/dgxblogs/p/11476916.html