小程序从入门到到开发--tabbar

勿知先生

已于 2023-12-14 11:29:02 修改

阅读量196

点赞数

分类专栏：小程序从入门到开发文章标签：小程序 tabbar 小程序开发

于 2019-10-13 11:26:00 首次发布

本文链接：https://blog.csdn.net/weixin_45442869/article/details/102530943

版权

小程序从入门到开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

#微信小程序TabBar的使用
找到项目根目录中的配置文件 app.json 加入如下配置信息

 "tabBar": {
    "color": "#B0B0B0",
    "selectedColor": "#FF4544",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "商城",
        "iconPath": "/assets/tabbar/tabbar1.png",
        "selectedIconPath": "/assets/tabbar/tabbar1_b.png"
      },
      {
        "pagePath": "pages/member/member",
        "text": "会员",
        "iconPath": "/assets/tabbar/tabbar2.png",
        "selectedIconPath": "/assets/tabbar/tabbar2_b.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/assets/tabbar/tabbar3.png",
        "selectedIconPath": "/assets/tabbar/tabbar3_b.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我",
        "iconPath": "/assets/tabbar/tabbar4.png",
        "selectedIconPath": "/assets/tabbar/tabbar4_b.png"
      }
    ]
  }

属性的解释

   tabBar  指底部的 导航配置属性

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

   selectedColor  点击时 底部导航文字的颜色

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

   list   导航配置数组

   selectedIconPath 选中时 图标路径

   iconPath 未选择时 图标路径

   pagePath 页面访问地址

   text  导航图标下方文字

注意：现在tabbar用的是固定tabbar，其中图标地址只能是字符串，不能用变量代替

在这里插入图片描述