小程序底部导航栏可在根目录下的 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 不得超过五个，所以在超过五个的情况下可以采用自定义导航栏进行开发。
