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

微信小程序自定义导航栏配置

微信小程序提供了强大的自定义化功能，通过合理配置和组件开发，我们可以实现多种样式的导航栏，满足不同页面的需求。以下是关于微信小程序导航栏的详细配置方法。

一、全局导航栏

微信小程序的导航栏是一个全局的顶部导航栏，可以通过在 app.json 中进行简单的配置即可实现。将以下配置添加至 app.json 中：

{
  "window": {
    "navigationBarStyle": "custom",
    "navigationBarTitleText": "标题"
  }
}

通过 navigationBarStyle 设置为 "custom" ，即可开启自定义导航栏功能。这个设置会隐藏默认的导航栏，从而为我们自定义一个全局式的导航栏。

二、自定义导航栏

为了实现不同页面有不同的导航栏样式或内容，需要在 app.json 中添加 navigationBarStyle": "custom"。如果需要完全自定义导航栏，可以将其他导航栏相关字段删除，直接设置为 "custom"。

通过自定义组件我们可以实现更个性化的导航栏功能。进入小程序项目根目录的 components 文件夹，创建一个新的组件文件夹，如 nav。然后依次创建组件的相关文件：组件描述文件 nav.json、组件脚本 nav.js、组件模板文件 nav.wxml 和样式文件 nav.wxss。

组件相关配置代码如下：

{
  "component": true,
  "usingComponents": {}
}

组件脚本 nav.js 的实现：

Component({
  properties: {
    title: {
      type: String,
      value: ''
    },
    cover_state: {
      type: Boolean,
      value: false
    },
    show_bol: {
      type: Boolean,
      value: true
    },
    my_class: {
      type: Boolean,
      value: false
    }
  },
  data: {
    type: '组件',
    bar_Height: wx.getSystemInfoSync().statusBarHeight
  },
  methods: {
    goBack: function() {
      wx.navigateBack({
        delta: 1
      });
    }
  }
});

组件模板 nav.wxml：

   
  
    
    
     
      
      
    
     
  
    
  
    
    
     
      {title}
     
  
    
   

组件样式 nav.wxss：

.status-bar {
  width: 100%;
  z-index: 99999;
  position: fixed;
  top: 0;
}
.goBack {
  position: absolute;
  top: 15rpx;
}
.tabar {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0);
}
.tabar2 {
  background: transparent !important;
}
.tabar2 text {
  color: #fff !important;
  font-weight: lighter !important;
}
.tabar text {
  height: 44px;
  line-height: 44px;
  padding: 0 30rpx;
  color: white;
  font-size: 12pt;
  font-weight: bold;
}
.tabar .active {
  color: #fff;
}

三、组件引用

在需要使用自定义导航栏的页面 page.json 中，添加组件引用路径：

{
  "usingComponents": {
    "component": "../components/nav/nav"
  }
}

通过上述配置，我们可以实现一个高度可定制的导航栏。以下几个方面可以根据需求进行调整：

const windowH = wx.getSystemInfoSync().screenHeight;

在 nav.wxml 中：

3. 导航栏样式：通过在 nav.wxml 中修改 classes 或 styles，可以改变导航栏的外观，如颜色、字体、返回按钮等。

通过上述方法，我们可以实现既符合小程序规范又满足个性化需求的导航栏解决方案。

转载地址：http://yqeiz.baihongyu.com/