微信小程序底部导航

2,525 阅读1分钟
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏。

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },

小程序通过在app.json设置tabBar来实现底部导航。

developers.weixin.qq.com/miniprogram…

配置的参数:

tabBar 指底部的 导航配置属性

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

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

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

list 导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text 导航图标下方文字