微信小程序自定义导航栏组件

组件效果图

一、前提

1.1 全局配置navigationStyle

• 调式基础库 >= 1.9.0
• 微信客户端 >= 6.6.0

1.2 单页面配置navigationStyle

• 调式基础库 >= 2.4.3
• 微信客户端 >= 7.0.0

二、配置

.json文件中配置navigationStyle

"navigationStyle": "custom",

三、实现

首先需要获取导航栏高度 存放在全局变量中

• app.js

// app.js
App({
  onLaunch() {
    // 获取胶囊信息
    let menuButtonObject = wx.getMenuButtonBoundingClientRect()
    // 获取设备信息
    wx.getSystemInfo({
      success: res => {
        // 整个导航栏的高度
        let navHeight = menuButtonObject.top + menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2
        // 导航栏的高度
        let nav = navHeight - res.statusBarHeight

        // 挂载到全区变量 globalData 上
        this.globalData.navHeight = navHeight
        this.globalData.nav = nav

        // 胶囊与左边的距离
        this.globalData.menuLeft = menuButtonObject.left
        // 胶囊的高度
        this.globalData.menuHeight = menuButtonObject.height
        // 胶囊距离顶部的高度
        this.globalData.menuBot = menuButtonObject.top - res.statusBarHeight
        // 整个设备的宽度
        this.globalData.windowWidth = res.windowWidth
      },
      fail: err => {
        console.log(err)
      }
    })
  },
  globalData: {}
})

• 自定义导航栏组件
  wxss

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
  <view style="{{'height: ' + navigationBarHeight}}"></view>
  <block wx:if="{{backgroundSrc}}">
    <view class="bg-cover"></view>
    <image mode="widthFix" class="bg-image" src="{{backgroundSrc}}" />
  </block>
  <view class='title-container'>
    <view class='capsule' wx:if="{{ back || home }}">
      <view bindtap='back' wx:if="{{back}}">
        <image src='/assets/images/back.png'></image>
      </view>
      <view bindtap='backHome' wx:if="{{home}}">
        <image src='/assets/images/home.png'></image>
      </view>
    </view>
    <view class='title'>{{text}}</view>
  </view>
</view>
<view hidden="{{!openPlaceholder}}" style="{{'background: white;height: ' + navigationBarHeight}}"></view>

wxss

.navbar {
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  overflow: hidden;
}

.bg-cover {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
  backdrop-filter: blur(3px);
}

.bg-image {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.title-container {
  height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  bottom: 44px;
}

.capsule {
  margin-left: 8px;
  height: 30px;
  background: #00000021;
  border: 1rpx solid #c9c9c9;
  border-radius: 16px;
  display: flex;
  align-items: center;
  margin-top: -6px;
}

.capsule>view {
  width: 45px;
  height: 60%;
  position: relative;
}

.capsule>view:nth-child(2) {
  border-left: 1rpx solid #c9c9c9;
}

.capsule image {
  width: 46%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.title {
  color: white;
  position: absolute;
  top: 6px;
  left: 104px;
  right: 104px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 14px;
}

js

// components/navigationBar/navigationBar.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    text: {
      type: String,
      value: 'Wechat'
    },
    back: {
      type: Boolean,
      value: false
    },
    home: {
      type: Boolean,
      value: false
    },
    // 高斯模糊背景图
    backgroundSrc: {
      type: String,
      value: ""
    },
    // 开启默认占位
    openPlaceholder: {
      type: Boolean,
      value: true   
    }
  },

  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      console.log(app.globalData)
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    navigationBarHeight: app.globalData.navHeight + 'px'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    backHome: function () {
      console.log(1)
      let pages = getCurrentPages()
      wx.navigateBack({
        delta: pages.length
      })
    },
    back: function () {
      console.log(1)
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

• 使用

  <navigationBar text="标题文字" backgroundSrc="https://p1.music.126.net/X3ioD4a3Sw8Vsuv4OLaZ_Q==/18797250788974371.jpg" back home/>