小程序底部导航栏

2018-11-19  本文已影响0人  爱上小程序

创建微信小程序的底部导航栏,需要用到“tabBar”
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
tabBar定义在app.josn里

1)新建两个页面(新建页面方法)user 和 classify
确定你的两个页面在app.josn中已注册
2)在app.josn中定义tabBar
每多加一个tab就要多写一段,并用大括号扩起来

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index", //跳转路径
        "text": "首页",                  //tab显示文本
        "iconPath": "image/index.png",  //tab图标
        "selectedIconPath": "image/index1.png" //选中时tab的图标
      },
      {
        "pagePath": "pages/public/public",
        "text": "分类",
        "iconPath": "image/classify-d.png",
        "selectedIconPath": "image/classify-d.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "image/user.png",
        "selectedIconPath": "image/user-d.png"
      }
    ]
  }

tabBar的一些常用属性,可以根据这些属性设计出你想要的导航栏样式

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

猜你喜欢

热点阅读