微信小程序之底部导航【前端】

sinnoo

发布于 2020-11-13 11:06:52

1.1K0

文章被收录于专栏：技术人生技术人生

一、介绍

1.小程序的底部导航需要在app.json文件里面设置

2.底部导航需要用到tabBar组件

二、具体代码

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#CC812B",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/icon/main_select.png",
        "iconPath": "images/icon/main.png",
        "pagePath": "pages/index/index",
        "text": "综合"
      },
      {
        "selectedIconPath": "images/icon/baike_select.png",
        "iconPath": "images/icon/baike.png",
        "pagePath": "pages/baike/index",
        "text": "百科"
      },
      {
        "selectedIconPath": "images/icon/dynamic_select.png",
        "iconPath": "images/icon/dynamic.png",
        "pagePath": "pages/dynamic/index",
        "text": "添加"
      },
      {
        "selectedIconPath": "images/icon/dynamic_select.png",
        "iconPath": "images/icon/dynamic.png",
        "pagePath": "pages/dynamic/index",
        "text": "动态"
      },
      {
        "selectedIconPath": "images/icon/my_select.png",
        "iconPath": "images/icon/my.png",
        "pagePath": "pages/my/index",
        "text": "我"
      }
    ]
  },

三、解释

1.color：字体颜色

2.selectedColor：选中底部导航时的字体颜色

3.selectedIconPath：选中时的icon路径

4.iconPath：未来选中是的icon路径

5.pagePath：页面路径

6.text：文案

备注：特别要说明的是，tabBar下list数组里面的第一条内容，一定要对应pages数组中的第一条内容，否则导航无法显示。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

微信小程序之底部导航【前端】

微信小程序之底部导航【前端】

一、介绍

二、具体代码

三、解释

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐