前言

提到微信小程序，就不得不提到它那磨人的顶部导航栏，真的有被丑到。身为强迫症患者，笔者实在是难以忍受，好在官方提供了解决方案，但是对于初学者还是有一丢丢的难度，为了初学者不在重蹈笔者的老路，这篇文章就给大家分享一下如何做一个好看的自定义顶部导航栏。

注意：本篇文章分享的是如何做一个好看的自定义导航栏，不是做组件哦！

正文

一、隐藏原生navigationBar

navigation-bar是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。

1.全局自定义顶部导航栏

在app.json的“window”里添加"navigationStyle": "custom"

"window": {
	"navigationStyle": "custom"
}

2.单独页面自定义顶部导航栏

在该页面的json文件里添加"navigationStyle": "custom"

{
  "usingComponents":{},
  "navigationStyle": "custom"
}

二、获取系统及按钮信息

1.js页面

获取系统信息并计算按钮位置信息

const app=getApp()
Page({
  data: {
    page_show:false,
    navHeight: '',
    menuButtonInfo: {},
    searchMarginTop: 0, // 搜索框上边距
    searchWidth: 0, // 搜索框宽度
    searchHeight: 0 ,// 搜索框高度
  },


  onLoad: function (options) {
    var systeminfo=wx.getSystemInfoSync()
    //console.log(systeminfo.windowHeight)
    this.setData({
      movehight:systeminfo.windowHeight,
      movehight2:systeminfo.windowHeight-100
    })

    this.setData({
      menuButtonInfo: wx.getMenuButtonBoundingClientRect()
    })
    console.log(this.data.menuButtonInfo)
    const { top, width, height, right } = this.data.menuButtonInfo
    wx.getSystemInfo({
      success: (res) => {
        const { statusBarHeight } = res
        const margin = top - statusBarHeight
        this.setData({
          navHeight: (height + statusBarHeight + (margin * 2)),
          searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
          searchHeight: height,  // 与胶囊按钮同高
          searchWidth: right - width -20// 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
        })
      }
    })

  }, 
})

2.wxml页面

通过获取的数据编写搜索框

<!--搜索-->
<view  style="height:{{navHeight}}px;background:#ffffff;position: sticky;top: 0px;z-index:99999; " >
  <view class="custom-bar__wrapper" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;width: {{searchWidth}}px;position:absolute;" >
    <view class="search-group" style="position:absolute;">
      <image    style="left: 7rpx;" src="/images/icon/sousuo.png" mode="aspectFit" />
      <input  class="search-group__input" type="text" placeholder="搜搜校园日常动态吧！" placeholder-style="color:#161823;" confirm-type="search" value="{{search}}" maxlength="25" bindconfirm="search"></input>
    </view>
  </view>
</view>

3.css页面

美化搜索框

.custom-bar__wrapper {
  left: 24rpx;
  padding: 0 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-group {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background:#F0F8FF ;
  border-radius: 100rpx;
  padding: 0 15rpx;
}
.search-group > input {
  font-size: 25rpx;
  left: 14px;
}
.search-group > image {
  height: 36rpx;
  width: 36rpx;
  margin-right: 20rpx
}

4.app.js页面

这是最容易忘的页面，一定要记得编写

App({
  onLaunch: function () {
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let custom = wx.getMenuButtonBoundingClientRect();
        this.globalData.Custom = custom;  
        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      }
    })
  },
})

三、查看效果

 总结思路

• 隐藏原生顶部导航栏
• 获取胶囊按钮、状态栏相关数据以供后续计算
• 根据不同机型计算出该机型的导航栏高度，进行适配
• 编写新的导航栏页面
• 应用获取的按钮参数
• css美化界面

飞鱼程序猿

如果这篇文章对您有帮助，麻烦给个免费的赞哦

或者关注微信公众号【飞鱼程序猿】获取更多信息。