微信小程序开发学习小结之tabBar组件

限制:

tabBar里边能够配置最少两个最少五个 页面.

分类:

分为两种,顶部和底部.

位置:

放于根目录下的app.json页面.

格式:

 "tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "home",
      "iconPath": "/images/tabBar/home.png",
      "selectedIconPath": "/images/tabBar/home-active.png"
     
    },
    {
      "pagePath": "pages/calculator/calculator",
      "text": "culculator",
      "iconPath": "/images/tabBar/calculator.png",
      "selectedIconPath": "/images/tabBar/calculator-avtive.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabBar/contact.png",
      "selectedIconPath": "/images/tabBar/contact-active.png"
    }
  ]
  },

其中list列表中存放单位元素为tabbar所含的页面,有几个元素tabbar就有几个页面.

属性:

tabbar的组成部分:

 

 

其中每个页面 下边都含有几个常用属性如下图所示:

 其中pagepath组件和text组件为必填项,这两个组件必须存在.而下方的iconpath组件和selectediconpath组件为非必填项,可以选填.如果不填,图标位置将会预留为背景色.

注意:

 当渲染顶部tabbar时不会显示图标,只会显示文字.

list列表的第一个页面要是pages下的第一个页面.

其中tabbar的图标素材可以去

iconfont-阿里巴巴矢量图标库

去获取.

样例:

  "tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "home",
      "iconPath": "/images/tabBar/home.png",
      "selectedIconPath": "/images/tabBar/home-active.png"
     
    },
    {
      "pagePath": "pages/calculator/calculator",
      "text": "culculator",
      "iconPath": "/images/tabBar/calculator.png",
      "selectedIconPath": "/images/tabBar/calculator-avtive.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabBar/contact.png",
      "selectedIconPath": "/images/tabBar/contact-active.png"
    }
  ]
  },