微信小程序的开发---tabBar的介绍

目录

一、tabBar的介绍

二、tabBar的6个组成部分

三、tabBar节点的配置项

四、tab项的配置选项

五、tabBar的使用


一、tabBar的介绍

tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:

(1)底部tabBar

(2)顶部tabBar

注意:

(1)tabBar中只能配置最少2个,最多5个tab页签

(2)当渲染顶部tabBar时,不显示icon(也就是说所谓的图标不会出现),只显示文本

二、tabBar的6个组成部分

backgroundColor: tabBar的背景颜色
selectedIconPath:选中时的图片路径
borderStyle:     tabBar上边框的颜色
iconPath:        未选中时的图片路径
selectedColor:   tab上的文字选中的颜色
color:           tab上文字的默认(未选中)的颜色

三、tabBar节点的配置项

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

四、tab项的配置选项

属性                类型    必填    说明
pagePath           String    是   页面路径,页面必须在pages中预先定义
text               String    是   tab上显示的文字
iconPath           String    否   未选中时的图标路径;当position为top时,不显示icon
selectedIconPath   String    否   选中时的图标路径;当position为top时,不显示icon

五、tabBar的使用

javascript 复制代码
"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页面"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息"
      }
    ]
  },
相关推荐
HappyAcmen8 小时前
关于微信小程序的面试题及其解析
微信小程序·小程序·notepad++
乔冠宇8 小时前
微信小程序修改个人信息头像(uniapp开发)
微信小程序·小程序·uni-app
lvbb669 小时前
微信小程序-路线规划功能
微信小程序·小程序·notepad++
爱上大树的小猪12 小时前
微信小程序模仿快播标签云滚动特效
微信小程序·小程序
從南走到北16 小时前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·开源·微信公众平台
黑云压城After16 小时前
uniapp小程序自定义日历(签到、补签功能)
小程序·uni-app
黑云压城After17 小时前
小程序(物流、快递),接入GPS北斗获取路线以及当前车辆位置
小程序
万岳科技程序员小金19 小时前
互联网医院系统源码解析:如何开发智能化的电子处方小程序?
小程序·app开发·互联网医院系统源码·智慧医疗小程序·医院app
Java Fans19 小时前
微信小程序——访问服务器媒体文件的实现步骤
服务器·微信小程序·小程序
Evaporator Core1 天前
微信小程序数据绑定与事件处理:打造动态交互体验
微信小程序·小程序·交互