微信小程式--自定義navBar

阿新 • • 發佈：2022-05-23

android平臺的微信小程式NavigationBarTItle題目居左，蘋果的居中，微信官方文件沒有navBar的相關設定，只能自行定義。

第一步：在page.json頁面的首頁路由中加入"navigationStyle": "custom"，取消預設的原生導航欄

第二步：新建navBar元件

具體程式碼：

index.vue

<template>
    <view class="navbar custom-class" :style="{height:globalData.navHeight + 'px'}">
      <view class=" 
navbar-action-wrap navbar-action-group row item-center" :style="{top:globalData.navTop + 'px'}" style="background-color:rgba(255,255,255,0.6)">
          <view class="navbar-action_item" @click="_navBack">返回</view>
          <view class="navbar-action_item last" @click="_toIndex">首頁</view>
      </view>
      <view class=' 
navbar-title' :style="{top:globalData.navTop + 'px'}">
        {{pageName}}
      </view>
    </view>
</template>

<script>
      export default{
          props: {
              pageName:String,
              showNav:{
                type:Boolean,
                value:true 

              },
              showHome: {
                type: Boolean,
                value: true
              }
         },
          data(){
              return {
                  navTop: '',
                  num:20, //字型大小
                  fontColor:'red' ,//字型顏色
                  globalData:{
                      navHeight: null,
                      navTop: null,
                      windowHeight: null
                  }
              }
          },
          onShow() {
             
           },
          methods: {
              // 獲取高度
              getHeight(){
                  let menuButtonObject = wx.getMenuButtonBoundingClientRect();  // 獲取膠囊按鈕的資訊
                  uni.getSystemInfo({
                    success: res => {
                      let statusBarHeight = res.statusBarHeight,    // 裝置高度（電量，時間...顯示的位置）
                        navTop = menuButtonObject.top,//膠囊按鈕與頂部的距離
                        navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//導航高度
                      this.globalData.navHeight = navHeight;
                      this.globalData.navTop = navTop;
                      this.globalData.windowHeight = res.windowHeight;
                    },
                    fail(err) {
                      console.log(err);
                    }
                  })
              },
              //回退
              _navBack: function () {
                  uni.navigateBack({
                    delta: 1
                  })      
              },
              //回主頁
              _toIndex: function () {
                uni.switchTab({
                    url: '/pages/index/index'
                })
              },
            }
      }
</script>

<style>
    @import url("./css/navbar.css");
    
</style>

navbar.css

.navbar {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  flex-shrink: 0;
}

.navbar-title {
  width: 100%;
  box-sizing: border-box;
  padding-left: 115px;
  padding-right: 115px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 10;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.navbar-action-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  left: 10px;
  z-index: 11;
  line-height: 1;
  padding-top: 4px;
  padding-bottom: 4px;
}

.navbar-action-group {
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  overflow: hidden;
}

.navbar-action_item {
    width: 20rpx;
    height: 20rpx;
  padding: 3px 0;
  color: #333;
}

.navbar-action-group .navbar-action_item {
  border-right: 1px solid #f0f0f0;
  padding: 3px 14px;
}

.navbar-action-group .last {
  border-right: none;
}

相關計算：

小程式可以通過 wx.getMenuButtonBoundingClientRect() 獲取膠囊按鈕的資訊和 wx.getSystemInfo() 獲取裝置資訊。

通過這些資訊我們可以計算出上面說的3個值：

1. 整個導航欄高度 = statausBarHeight + height + (top-statausBarHeight )*2；

2. 膠囊按鈕與頂部的距離 = top；

3.膠囊按鈕與右側的距離 = windowWidth - right。

關於第1步中，為啥要乘以2的原因，請看靈魂畫手般的我畫的圖紙：

第三步：引入元件

在建立好的首頁頁面引入navbar元件

<template>
    <view class="container">
        <navbar :pageName="nbTitle" ref="navBarRef"></navbar>
    </view>
</template>
<script>
    import navbar from '../../components/navbar/index.vue'
    export default {
        components: {
        navbar
        },
            data() {
        return {
                    nbTitle: '首頁'
                }
            },
            onShow() {
        this.$refs.navBarRef.getHeight()
        },
        }