微信小程序app.json全局配置之tabBar配置

责编:menVScode 2018-10-12 15:54 阅读(153)

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tab 的背景色
borderStyle String black tabbar上边框的颜色, 仅支持 black / white
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String bottom tabBar的位置,仅支持 bottom / top

其中 list 接受一个数组,只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字
iconPath String 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。
postiontop 时,不显示 icon。
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。
postiontop 时,不显示 icon。

官方提供的图片,tabBar官方介绍:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE


代码展示app.json,注意json文件里是不可以写注释的。

{
  "pages":[
    "pages/classify/classify",
    "pages/home/home",
    "pages/cart/cart",
    "pages/mine/mine",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "menvscode.com",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#858585",
    "selectedColor": "#f0145a",
    "backgroundColor": "#ffffff",
    "borderStyle": "#000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "images/bottomNav/home.png",
        "selectedIconPath": "images/bottomNav/home_select.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/classify/classify",
        "iconPath": "images/bottomNav/classify.png",
        "selectedIconPath": "images/bottomNav/classify_select.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "images/bottomNav/cart.png",
        "selectedIconPath": "images/bottomNav/cart_select.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/bottomNav/mine.png",
        "selectedIconPath": "images/bottomNav/mine_select.png",
        "text": "我的"
      }
    ]
  },
  "debug": true
}

代码效果图

GIF

小提示:如果进到小程序默认选中的是分类,而不是首页,那么可以将pages里面的分类地址放在第一位即可。

"pages":[
  "pages/classify/classify",
  "pages/home/home",
  "pages/cart/cart",
  "pages/mine/mine",
  "pages/index/index"
],


前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码