本文共 2997 字，大约阅读时间需要 9 分钟。

小程序底部导航栏可在根目录下的 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:#004098;">厦门</view>    </navigator>    <navigator hover-class="none" class="wtx_nav_item" url="/pages/quanzhou/quanzhou">      <image src="../../images/iconquanzhou.png" class="iconfont"></image>      <view style="color:#e86704;">泉州</view>    </navigator>    <navigator hover-class="none" class="wtx_nav_item" url="/pages/zhangzhou/zhangzhou">      <image src="../../images/iconzhangzhou.png" class="iconfont"></image>      <view style="color:#ae3da1;">漳州</view>    </navigator>    <navigator hover-class="none" class="wtx_nav_item" url="/pages/longyan/longyan">      <image src="../../images/iconlongyan.png" class="iconfont" ></image>      <view style="color:#4d02ae;">龙岩</view>    </navigator>    <navigator hover-class="none" class="wtx_nav_item" url="/pages/sanming/sanming">      <image src="../../images/iconsanming.png" class="iconfont" ></image>      <view style="color:#51a368;">三明</view>    </navigator>    <navigator hover-class="none" class="wtx_nav_item" url="/pages/buy/buy">      <image src="../../images/iconbug.png" class="iconfont" ></image>      <view style="color:#69500d;">购买</view>    </navigator>  </view>

wxss代码如下：

/* 底部导航 */.wtx_nav {
     position: fixed;  bottom: 0;  left: 0;  right: 0;  z-index: 2;  background: #fff;  border-top: 1px solid rgba(0, 0, 0, 0.1);  display: flex;  margin-top: 20px;  padding-bottom:calc(10px + env(safe-area-inset-bottom)/2);}.wtx_nav_item {
     flex: 1;  text-align: center;  font-size: 24rpx;  line-height: 1;  padding: 12rpx 0 26rpx;  color: #afb2bc;}.wtx_nav_item .iconfont {
     height: 50px;  width: 50px;  display: block;  margin: auto;}

效果如下图展示

说明
在 navigator 处添加 url 入径即可。

总结

小程序自带的 tabBar 不得超过五个，所以在超过五个的情况下可以采用自定义导航栏进行开发。