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

微信小程序 tabBar 配置详解

最新推荐文章于 2024-09-15 23:39:19 发布

原创最新推荐文章于 2024-09-15 23:39:19 发布 · 854 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #微信小程序

微信小程序专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了微信小程序中 tabBar 的配置，包括其位置、格式、属性等，并强调了至少需要包含两个到五个页面，每个页面的必要属性如 pagePath 和 text。同时，提到了 iconfont 网站作为获取图标素材的来源。示例代码展示了如何配置底部 tabBar，需要注意list列表的第一个页面应为pages下的第一个页面。

限制:

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"
    }
  ]
  },