小程序底部导航栏配置以及自定义导航栏

小程序底部导航栏可在根目录下的 app.json 文件进行全局配置，但是部分情况下需要我们自己进行自定义。

** 一 ：在app.json 文件进行全局配置**

{
  "pages": [
    "pages/index/index",
    "pages/classify/classify",
    "pages/cart/cart",
    "pages/mine/mine",
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/iconfont-home.jpg",
        "selectedIconPath": "images/iconfont-home-active.jpg"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "分类",
        "iconPath": "images/iconfont-classify.jpg",
        "selectedIconPath": "images/iconfont-classify-active.jpg"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "images/iconfont-cart.jpg",
        "selectedIconPath": "images/iconfont-cart-active.jpg"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/iconfont-my.jpg",
        "selectedIconPath": "images/iconfont-my-active.jpg"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

效果如下图展示

说明

** 二 ：自定义底部导航栏**

view代码如下：

 <view class="wtx_nav">
    <navigator hover-class="none" class="wtx_nav_item" url="/pages/xiamen/xiamen">
      <image src="../../images/iconxiamen.png" class="iconfont"></image>
      <view style="color