微信小程序底部导航实现

效果图（基于原生的微信小程序开发）

1、在小程序根目录下的app.json文件中添加界面设置和底部导航配置

{
  "pages": [
    "pages/home/home",
    "pages/mine/mine",
    "pages/challenge/challenge",
    "pages/demo/index/index",
    "pages/demo/logs/logs",
    "pages/main_page_list_detail/mainListDetail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#00BBA1",
    "navigationBarTitleText": "挑战",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/navigation_home.png",
        "iconPath": "images/navigation_home_normal.png",
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/navigation_attention.png",
        "iconPath": "images/navigation_attention_normal.png",
        "pagePath": "pages/challenge/challenge",
        "text": "挑战"
      },
      {
        "selectedIconPath": "images/navigation_mine.png",
        "iconPath": "images/navigation_mine_normal.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "usingComponents": {
    "van-button": "../../miniprogram_npm/vant-weapp/button/index",
    "van-tab": "../../miniprogram_npm/vant-weapp/tab/index",
    "van-tabs": "../../miniprogram_npm/vant-weapp/tabs/index",
    "van-row": "../../miniprogram_npm/vant-weapp/row/index",
    "van-col": "../../miniprogram_npm/vant-weapp/col/index",
    "van-cell": "../../miniprogram_npm/vant-weapp/cell/index",
    "van-cell-group": "../../miniprogram_npm/vant-weapp/cell-group/index"
  }
}

配置底部导航文件的图标 文字 点击之后的效果

usingComponents是使用到的组件 在app.json中配置可以起到全局使用的效果,后面单独写篇博客介绍使用第三方组件