小程序自定义头部导航

柔光的暖阳◎ 2023-03-03 05:53 18阅读 0赞

![20200730112310522.png][]

首先效果图奉上，右边的胶囊按钮是自带的，我们自定义的是左边的内容

（一般情况下我们是不需要自定义头部导航的，我这个是有需求是在tabbar页面要有返回的按钮，但是tabbar页面默认是没有返回的，所以这里我们自定义一下）

第一步：.json 文件，添加 ** "navigationStyle": "custom" ** ， 告诉页面，这里导航要自定义了，如果不写这一步的话，下面的写了也出不来

"navigationStyle": "custom"

![20200730112823897.png][]

第二步： .wxml 文件，添加我们需要自定义的 wxml 代码

<view class="custom_nav" style="height:{
       {navbarHeight}}rpx;">
      <view class="custom_nav_box" style="height:{
       {navbarHeight}}rpx;">
        <view class="custom_nav_bar" style="top:{
       {statusBarHeight}}px">
          <view class="custom_nav_icon" data-title='index' bindtap='jumpToTabbar'
          style="height:40rpx; top:{
       {top}}rpx; left:24rpx;width: width: 67rpx;">
            <view class="gobank"></view>
            <view class="title">
              服务商
            </view>
          </view>
        </view>
      </view>
    </view>

第三步： .wxss 文件，添加我们自定义导航的样式

/* 自定义头部导航 */
    .custom_nav {
      width: 100%;
      background: #fff;
    }
    
    .custom_nav_box {
      position: fixed;
      width: 100%;
      background: #fff;
    }
    .custom_nav_bar{
      position: relative;
    }
    
    .custom_nav_box .custom_nav_icon {
      position: absolute;
      display: flex;
      padding: 0 10rpx;
      align-items: center;
    }
    .custom_nav_icon .gobank {
      width: 24rpx;
      height: 24rpx;
      border-top: 4rpx solid rgb(0, 0, 0);
      border-right: 4rpx solid rgb(0, 0, 0);
      transform: rotate(-135deg);
    }
    .custom_nav_icon .title {
      margin-top: -2rpx;
    }
    /* 自定义头部导航结束 */

第四步： 添加 js ， 获取对应的高度以及添加返回主页的方法

这一步比较重要，要把我们自定义的导航栏放到胶囊边上，就得知道状态栏高度是多少，还得知道左边距离是多少

**wx.getSystemInfoSync()\['statusBarHeight'\] ** 这个是获取状态栏高度的（状态栏，就是显示电池电量的那一栏）

**wx.getMenuButtonBoundingClientRect() **   这个是获取胶囊的位置的，打印一下里面数据就都清楚了

// 自定义头部导航
      onLoad: function (options) {
        let statusBarHeight = wx.getSystemInfoSync()['statusBarHeight'] // 状态栏高度
        console.log('状态栏高度statusBarHeight==========', statusBarHeight)
        console.log(wx.getSystemInfoSync())
        let style = wx.getMenuButtonBoundingClientRect()
        this.setData({
          statusBarHeight: statusBarHeight,
          navbarHeight: statusBarHeight + 116, 
          top: style.top + 6,
          right: style.right
        })
      }

// 跳转回主页的方法
      jumpToTabbar: function (e) {
        let space = e.currentTarget.dataset.title
        wx.switchTab({
          url: '../' + space + '/index'
        })
      },

才疏学浅，如有不足，欢迎指出 ，不胜感激 (•̀ᴗ•́)و ̑̑

[20200730112310522.png]: /images/20230208/2e0152a698a64f479f18dcb8f1ebe148.png
[20200730112823897.png]: /images/20230208/93d7419885e147608fd857947def534b.png