tabBar
底部Tab切换选项或顶部Tab切换选项。数目必须是2-5个。
常用属性
-
Color
文字默认颜色 -
selectedColor
文字选中颜色 -
backgroundColor
背景颜色 -
borderStyle
上边框颜色,默认为black
,仅支持black
或white
-
position
tabBar的位置,默认为bottom
,仅支持bottom
或top
,如果设为top
,则图标属性无效不会显示图标仅显示文字。 -
list
选项列表。2-5个。Item属性如下:- text
文字 - pagePath
页面路径,必须在 pages 中先定义 - iconPath
图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 postion 为 top 时,不显示 icon - selectedIconPath
选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。
- text
-
自定义tabBar
如果系统的tabBar的样式不满足需要,可以自定义tabBar。"libVersion": "2.5.0"
。
基础库 2.5.0 开始支持,低版本需做兼容处理,可使用官方提供的判断是否支持的方式,若不支持提示用户更新微信客户端程序。app.json
中添加属性"usingComponents": {}
,且tabBar中添加"custom": true
。
在代码根目录下添加入口文件:custom-tab-bar/index.js
、custom-tab-bar/index.json
、custom-tab-bar/index.wxml
、custom-tab-bar/index.wxss
且编写代码即可。
可参照官网说明下载官方demo后查看更改自定义。
该笔记实现自定义效果:
本文源码地址,若需git下载该tag版本,请注意命令指定tag。