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

最新推荐文章于 2025-03-29 22:23:31 发布

tiffany_kim

最新推荐文章于 2025-03-29 22:23:31 发布

阅读量2.3k

点赞数 1

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/tiffany_kim/article/details/114886026

版权

微信小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在小程序中进行底部导航栏的全局配置和自定义。在app.json文件中可进行全局设置，但当需求超出默认限制时，可通过编写view和wxss代码来自定义导航栏，并通过navigator添加url路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序底部导航栏可在根目录下的 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;
}