小程序tabBar底部导航详细介绍

来源：互联网发布：单门网络门禁控制器编辑：程序博客网时间：2024/05/16 01:08

几乎每个app都会用到底部导航的，相对于小程序而言自然也是如此了。小程序的底部导航tabBar写起来相对没有那么复杂。只要在app.json中配置就好了。

注意：tabBar至少两个最多五个item选项

tabBar的主要属性：

tabBar中每个item的属性如下：

当然官网中也有详细说明：

最后是tabBar在app.json中的应用实例：

{  "pages":[    "pages/index/index",    "pages/fans/fans",    "pages/shopCart/shopCart",    "pages/mine/mine",    "pages/logs/logs"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#353535",    "navigationBarTitleText": "小程序",    "navigationBarTextStyle":"#fff"  },  "tabBar": {    "color": "#666666",    "selectedColor": "#ff4a4a",    "borderStyle": "white",    "backgroundColor": "#ffffff",    "list": [{      "pagePath": "pages/index/index",      "text": "首页",      "iconPath": "img/home.png",      "selectedIconPath": "img/home_slt.png"    },{      "pagePath": "pages/fans/fans",      "text": "粉丝",      "iconPath": "img/fans_merchant.png",      "selectedIconPath": "img/fans_merchant_slt.png"    },{      "pagePath": "pages/shopCart/shopCart",      "text": "购物车",      "iconPath": "img/shopping_cart.png",      "selectedIconPath": "img/shopping_cart_slt.png"    },{      "pagePath": "pages/mine/mine",      "text": "我的",      "iconPath": "img/mine.png",      "selectedIconPath": "img/mine_slt.png"    }]  }}

这样就可以运用底部了。O(∩_∩)O

1 0