跳至主要內容

全局配置 tabBar

刘春龙原创...大约 1 分钟WEB前端小程序教程文档

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

tabBar 属性

属性类型必填默认值描述
colorHexColortab 上的文字默认颜色,仅支持十六进制颜色
selectedColorHexColortab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColorHexColortab 的背景色,仅支持十六进制颜色
borderStylestringblacktabbar 上边框的颜色, 仅支持 black / white
listArraytab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
positionstringbottomtabBar 的位置,仅支持 bottom / top

常用属性是 list ,其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab

List 属性说明

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

修改app.json配置文件,增加tabBar属性配置

"tabBar": {
  "color":"#999999",
  "selectedColor":"#ff0000",
  "backgroundColor":"#fff",
  "borderStyle":"black",
  "position":"bottom",
  "list": [{
    "pagePath": "pages/index/index",
    "text": "首页",
    "iconPath":"./images/home.png",
    "selectedIconPath":"./images/home_select.png"
   }, {
    "pagePath": "pages/news/news",
    "text": "新闻",
    "iconPath": "./images/news.png",
    "selectedIconPath": "./images/news_select.png"
   }]
},
上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7