小程序自定义头部导航

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

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

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

 "navigationStyle": "custom"

第二步： .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'
    })
  },

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

小程序自定义头部导航

猜你喜欢