小程序中实现自定义头部导航组件

最新推荐文章于 2025-06-15 10:07:16 发布

原创

最新推荐文章于 2025-06-15 10:07:16 发布 · 2.7k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #微信小程序 #前端

在页面中实现自定义头部导航的组件，如果仅是单个页面中需要自定义可在页面的json文件中配置"navigationStyle": “custom”，如果是项目中所有页面都想使用自定义的组件，可在app.json的window中全局配置"navigationStyle": “custom”。
先分析头部导航的组成，可参考图1

其组成主要包含两部分：状态栏、导航区域，下面分别说说这两部分的高度如何获取。
1、获取状态栏高度
对于不同的机型而言，状态栏的高度是有所差异的，可通过wx.getSystemInfo来获取，但需要注意的是该接口在基础库2.20.1后就停止维护，需要改用wx.getWindowInfo获取。
（1）使用wx.getSystemInfo获取示例代码

wx.getSystemInfo({
   
   
    success: (res) => {
   
   
        this.setData({
   
   
            statusBarHeight: res.statusBarHeight 
        })
    }
})

在这里插入图片描述
（2）使用wx.getWindowInfo示例代码

 constres = wx.getWindowInfo()
 this.setData({
   
   
   statusBarHeight: res.statusBarHeight 
 })

2、导航区域高度
（1）导航区域的高度可自己定义，但考虑到右侧胶囊，为使得标题位置垂直居中，因而导航区域的高度实际也需要计算得出。其公式为：导航区域的高度 = 胶囊的高度 + 胶囊距离状态栏的高度 * 2。

// 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
const rect = wx.getMenuButtonBoundingClientRect()
console.log('右上角胶囊按钮）布局', rect);

在这里插入图片描述

// 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
const rect = wx.getMenuButtonBoundingClientRect()
console.log('右上角胶囊按钮）布局', rect);
wx.getSystemInfo({
   
   
  success: (res) => {
   
   
    this.setData({
   
   
      navBarHeight: rect.bottom - rect.top + (rect.top - res.statusBarHeight) * 2, 
	// navBarHeight: rect.height + (rect.top - res.statusBarHeight) * 2, 
    })
  }
})

（2）考虑到胶囊位置，因而导航栏区域可自定义的宽度需减去胶囊的宽度，使用padding-right的方式占用胶囊的宽，注意需要设置为box-sizing: border-box，懂得都懂。
在这里插入图片描述

// 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
 const rect = wx.getMenuButtonBoundingClientRect()
 console.log('右上角胶囊按钮）布局', rect);
 wx.getSystemInfo({
   
   
   success: (res) => {
   
   
     this.setData({
   
   
       innerPaddingRight: `padding-right:${
     
     res.windowWidth - rect.left}px`,
     })
   }
 })

（3）剩余的宽度你就可以自由发挥了。
以下是组件参考代码
index.xml

<view class="weui-navigation-bar {
    
    {extClass}}">
  <view class="status-bar" style="height: { 
       { 
       statusBarHeight}}px; color: { 
       { 
       color}}