小程序自定义顶部导航栏

1.首先在app.json中的window项设置："navigationStyle": "custom"开启导航栏自定义。

2.components中创建相应文件：

.wxml

<view style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px;">
  <view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px;background:{{bgColor}};">
    <view class="title-bar">
	  <view class="back" wx:if="{{showBack}}" bindtap="headerBack">
	    <image class="img" src="../../images/back.png"></image>
	  </view>
    </view>
    <view class="header-title ellipsis">{{title}}</view>
    <block wx:if="{{currPath === 'pages/index/index'}}">
      <navigator url="/pages/setting/setting" hover-class="none" class="setting">
	    <image class="img" src="/image/setting.png"></image>
      </navigator>
    </block>
  </view>
</view>

showBack表示是否显示左上角返回箭头图标

下方的navigator表示如果是首页则左上角显示自定义的图标（如设置）

.js

const app = getApp();
Component({
  properties: {
    //标题
    title: {
      type: String,
      value: '首页'
    },
    // 是否显示返回
    showBack: {
      type: Boolean,
      value: false
    },
    // 背景色
    bgColor: {
      type: String,
      value: '#fff'
    }
  },
 
  data: {
    statusBarHeight: 0,
    titleBarHeight: 0,
  },
 
  ready: function () {
    // 因为很多地方都需要用到，所有保存到全局对象中
    if (app.globalData && app.globalData.statusBarHeight && app.globalData.titleBarHeight) {
      this.setData({
        statusBarHeight: app.globalData.statusBarHeight,
        titleBarHeight: app.globalData.titleBarHeight
      });
    
      this.emit();
    } else {
      let that = this
      wx.getSystemInfo({
        success: function (res) {
          if (!app.globalData) {
            app.globalData = {}
          }
          if (res.model.indexOf('iPhone') !== -1) {
            app.globalData.titleBarHeight = 44
          } else {
            app.globalData.titleBarHeight = 48
          }
          app.globalData.statusBarHeight = res.statusBarHeight
          that.setData({
            statusBarHeight: app.globalData.statusBarHeight,
            titleBarHeight: app.globalData.titleBarHeight
          });
  
          that.emit();
        },
        failure() {
          that.setData({
            statusBarHeight: 0,
            titleBarHeight: 0
          });
        }
      })
    }
  },
 
  methods: {
    headerBack() {
      wx.navigateBack({
        delta: 1,
        fail(e) {
          wx.switchTab({
            url: '/pages/index/index'
          })
        }
      })
    },
    emit() {
      this.triggerEvent('ready', {
        statusBarHeight: app.globalData.statusBarHeight,
        titleBarHeight: app.globalData.titleBarHeight
      })
    },
  }
})

properties内是外部传入的数据

titleBarHeight和statusBarHeight分别是导航栏高度和内边距

.wxss

.header {
  display: flex;
  align-items: center;
  top: 0;
  position: fixed;
  width: 100%;
  background-color: #FFF;
  z-index: 99999;
}
.header .back {
  width: 59rpx;
  height: 100%;
  display: flex;
  align-items: center;
}
.header .title-bar {
  padding-left: 22rpx;
  height: 56rpx;
  width: 100%;
  box-sizing: border-box;
}
.header .title-bar .img, .setting .img {
  width: 44rpx;
  height: 44rpx;
  /* vertical-align: top; */
  display: block;
}
.header .header-title {
  position: absolute;
  left: 50%;
  font-size: 37rpx;
  transform: translateX(-50%);
  max-width: 40%;
}
 
.setting{
  position: absolute;
  left: 30rpx;
}
 
/* 一行省略号 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.json

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

3.引用

1. 在其他页面的json文件中设置：

   { "usingComponents": { "navbar": "/components/navbar/navbar" } }

2. 在wxml文件中加入：

   <navbar title="首页"></navbar>