小程序tabBar

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字;

"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "images/icon_consult_press.png",
"iconPath": "images/icon_consult.png",
"pagePath": "pages/index/index",
"text": "首页"

},
{
"selectedIconPath": "images/icon_invest_press.png",
"iconPath": "images/icon_invest.png",
"pagePath": "pages/logs/logs",
"text": "一元投"

},
{
"selectedIconPath": "images/icon_mine_press.png",
"iconPath": "images/icon_mine.png",
"pagePath": "pages/mine/mine",
"text": "我的"

}

]

}
注意:每个页面的json文件都不能去掉navigationBarTitleText这个属性。否则会报错

### 小程序 TabBar 使用教程 #### 配置底部 TabBar 页面效果 小程序中的 `tabBar` 可以设置为底部或顶部,主要用于实现多页面之间的快速切换。通过配置 `app.json` 文件内的 `tabBar` 属性,可以定义显示在底部的选项卡样式和链接[^1]。 ```json { "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] } } ``` #### 设置 TabBar 图标与颜色 为了增强用户体验并保持界面的一致性,在 `tabBar` 中还可以指定图标以及文字的颜色属性: - `backgroundColor`: 定义整个 `tabBar` 背景色; - `borderStyle`: 设定 `tabBar` 上方边框的颜色风格; - `color`: 文字默认(未选中状态)下的颜色; - `selectedColor`: 当前激活项的文字颜色; - `iconPath`: 正常状态下使用的图标路径; - `selectedIconPath`: 已选择状态下展示的不同图标文件位置; 以上参数均需放置于 `app.json` 的 `tabBar` 对象内进行声明[^5]。 #### 解决 TabBar 刷新问题 当遇到点击 `tabBarItem` 后无法正常加载对应页面的情况时,可以在处理标签页跳转逻辑的地方调用 `onLoad()` 方法强制刷新当前页面的数据。另外需要注意的是,如果手动构建 URL 地址,则要确保路径字符串前面加上斜杠 `/` 来指明绝对路径[^4]。 ```javascript // pages/tabPage/tabPage.js Page({ onLoad(options){ console.log('TabPage loaded'); }, onShow(){ this.onLoad(); } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值