实现小程序底部导航tabBar

一般在app和电商网站中底部的切换高亮显示是非常的常见的

现在来实现一下：

一、首先先找到文件目录下的

二、在这个app.josn文件中写入

{
  "pages": [
    "pages/index/index",
    "pages/message/message",
    "pages/profile/profile",
    "pages/contact/contact"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "本地生活项目",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#ff0000",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "./tabs/home-active.png",
        "iconPath": "./tabs/home.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "./tabs/message-active.png",
        "iconPath": "./tabs/message.png",
        "pagePath": "pages/message/message",
        "text": "信息"
      },
      {
        "selectedIconPath": "./tabs/profile-active.png",
        "iconPath": "./tabs/profile.png",
        "pagePath": "pages/profile/profile",
        "text": "我的"
      },
      {
        "selectedIconPath": "./tabs/contact-active.png",
        "iconPath": "./tabs/contact.png",
        "pagePath": "pages/contact/contact",
        "text": "联系我们"
      }
    ]
  },
  "sitemapLocation": "sitemap1.json"
}

三、来说一下意思

"pages": [
    "pages/index/index",
    "pages/message/message",
    "pages/profile/profile",
    "pages/contact/contact"
  ],  

就是在pages目录下创建注册index文件夹文件下就会自动生成4个文件js、json、wxml、wxss

下面在来说一下tabbar数组下的属性

• tabBar 这个是底部的导航配置属性
• color 未选中时底部导航文字的颜色
• selectedColor 点击选中时底部导航文字的颜色
• borderStyle 底部导航边框的样色（这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）
• list 导航配置数组
• iconPath 未选中时图标路径
• selectedIconPath 选中时图标路径 也就是高亮的效果
• text 导航图标下方文字
• pagePath 页面访问地址 也就是点击要去的地方