小程序自定義頭部導航欄

 

第一步：在app.json中設置

 

目前微信小程序不支持單個頁面設置，一旦決定要使用自定義導航欄后，那么每個頁面都需要設置

 

導航欄組件目錄：

 

 index.wxml  文件

<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>
    <!-- 導航欄 中間的標題 -->
  <view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.title}}</view>
  <view style='display: flex; justify-content: space-around;flex-direction: column'>
      <!-- 導航欄  左上角的返回按鈕 和home按鈕 -->
      <!-- 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按鈕的顯示隱藏，首頁不顯示 -->
    <view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
       <!-- 左上角的返回按鈕，wx:if='{{!share}}'空制返回按鈕顯示 -->
       <!-- 從分享進入小程序時 返回上一級按鈕不應該存在 -->
      <view bindtap='_navback' wx:if='{{!share}}'>
        <image src='/common/image/nav-back.png' mode='aspectFit' class='back-pre'></image>
      </view>
      <!-- <view class='navbar-v-line' wx:if='{{share}}'></view> -->
      <view bindtap='_backhome' wx:if='{{share}}'>
        <image src='/common/image/nav-home.png' mode='aspectFit' class='back-home'></image>
      </view>
    </view>
  </view>
</view>

 

 index.wxss  文件

/* 頂部要固定定位   標題要居中   自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */
.nav-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    background: #fff;
    color: #000;
    z-index: 9999999;
}
/* 標題要居中 */
.nav-title {
    position: absolute;
    text-align: center;
    max-width: 400rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 30rpx;
    color: #2c2b2b;
    font-weight: normal;
}
  
.nav-capsule {
    display: flex;
    align-items: center;
    margin-left: 30rpx;
    width: 140rpx;
    justify-content: space-between;
    height: 100%;
}
  
.navbar-v-line {
    width: 1px;
    height: 32rpx;
    background-color: #e5e5e5;
}
  
.back-pre, .back-home {
    width: 36rpx;
    height: 36rpx;
    margin-top: 8rpx;
    padding: 10rpx;
}
.nav-capsule .back-home {
    width: 36rpx;
    height: 40rpx;
    margin-top: 3rpx;
}

 

 index.json文件（自定義組件必須）

{
    "component": true
}

 

index.js  文件

const app = getApp()
Component({
  properties: {
    navbarData: {   //navbarData   由父頁面傳遞的數據，變量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) {}
    }
  },
  data: {
    height: '',
    //默認值  默認顯示左上角
    navbarData: {
      showCapsule: 1
    }
  },
  attached: function () {
    // 獲取是否是通過分享進入的小程序
    this.setData({
      share: app.globalData.share
    })
    // 定義導航欄的高度   方便對齊
    this.setData({
      height: app.globalData.height
    })
  },
  methods: {
    // 返回上一頁面
    _navback(event) {
      // 當前頁面為“編輯收貨地址”時，對返回按鈕進行劫持
      if(this.data.navbarData.pageName === 'edit-address'){
        wx.showModal({
          content: '當前頁面尚未保存，是否確認返回？',
          cancelColor: '#909399',
          confirmColor: '#3888FF',
          success: function(res){
              if(res.confirm){
                wx.navigateBack()
              }
          }
        })
        return ;
      }
      wx.navigateBack()
    },
    //返回到首頁
    _backhome() {
      wx.switchTab({
        url: '/pages/home/home',
      })
    }
  }

}) 

 

 app.js  文件

App({
  onLaunch: function (options) {
    // 判斷是否由分享進入小程序
    if (options.scene == 1007 || options.scene == 1008) {
      this.globalData.share = true
    } else {
      this.globalData.share = false
    };
    // 獲取設備頂部窗口的高度（不同設備窗口高度不一樣，根據這個來設置自定義導航欄的高度）
    wx.getSystemInfo({
        success: (res) => {
          this.globalData.height = res.statusBarHeight
        }
    })
  },
  globalData: {
    appid: "xxxxxxxxx",
    share: false,  // 分享默認為false
    height: 0 // 導航欄高度
  }
})

 

 app.wxss  文件

page{
  position: relative;
  z-index: 9999998;
}

 

 自此，導航欄組件已搭建完成，讓我們來使用它吧

 

在小程序頁面中：

index.wxml  文件

<!-- 引入自定義組價。'navbar-data'中navbar是自定義名字，決定了組件中'navbarData'的名字 -->
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<view style='margin-top: {{height}}px'>

</view>

 

 index.json 文件

{
    "usingComponents": {
      "nav-bar": "/components/navbar/index"
    }
}

 

 index.js文件

//獲取應用實例
const app = getApp()
Page({
  data:{
    // 組件所需的參數
    nvabarData: {
      showCapsule: 1, //是否顯示左上角圖標   1表示顯示    0表示不顯示
      title: '我的頁面', //導航欄 中間的標題
    },
    height: app.globalData.height * 2 + 20  // 此頁面 頁面內容距最頂部的距離
  }
}