技術標籤：筆記微信小程式jswxmlwxss

微信小程式自定義頭部導航欄元件

好久沒有更新微信小程式了，現在寫寫微信小程式的自定義頭部元件，首先我們需要建立一個元件存放的資料夾：

在這裡面建立我們所需要的元件資料夾以及對應的檔案

應為是自定義的元件 所以我們需要獲取微信小程式頂部視窗的高度所以我們需要在app.js中新增獲取手機微信小程式頂部視窗的高度的方法再到我們元件的js中呼叫app.js檔案！

//app.js
App({
  onLaunch: function (options) {
    // 展示本地儲存能力
    var logs = wx.getStorageSync
 
('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登入
    wx.login({
      success: res => {
        // 傳送 res.code 到後臺換取 openId, sessionKey, unionId
      }
    })
    // 獲取使用者資訊
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo'
 
]) {
          // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 傳送給後臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
              // 所以此處加入 callback 以防止這種情況
 

              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
    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: {
    userInfo: null,
    share: false,  // 分享預設為false
    height: 0,
  }
})

這裡面還有微信小程式剛剛建立獲取頭像暱稱的方法，我並沒有刪除！
然後我們需要在微信小程式的元件檔案的js檔案下呼叫app.js

以下就說我元件的js檔案

const app = getApp()
Component({
  properties: {
    navbarData: {   //navbarData   由父頁面傳遞的資料，變數名字自命名
      type: Object,
      value: {},
      //圖片路徑我是直接從父元件返回回來的
      pic:"",//返回上一頁的圖片路徑
      home:"",//返回首頁的圖片路徑
      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() {
      wx.navigateBack({
        // delta: 1 
      })
    },
  //返回到首頁
    _backhome() {
      wx.navigateTo({
        url: '/pages/mine/mine',//返回首頁的地址
      })
    }
  }
 
}) 

以下是我wxml檔案

<view class='{{m1.styleType(navbarData.background)}}' style='height: {{height*2 + 29}}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;'>
 
    <!-- //  其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按鈕的顯示隱藏，首頁不顯示 -->
    <view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
   		<!-- //返回按鈕上一頁 -->
      <view bindtap='_navback' wx:if='{{navbarData.pic}}'>
        <image src='{{navbarData.pic}}' class='back-pre'></image>
      </view>
      <!-- //返回按鈕首頁 -->
      <view bindtap='_backhome' wx:if='{{navbarData.home}}'>
        <image src='{{navbarData.home}}' class='back-home'></image>
      </view>
    </view>
  </view>
</view>
<!--//方在html中的方法呼叫-->
<!-- //我們在父元件返回不同的值的時候我們獲取的class也會不同，如果返回的是1的話，元件頂部導航欄會變成透明色-->
<wxs module="m1">
  var styleType = function (val) {
    switch (val) {
      case 1:
        return 'nav-wrap';
        break;
      default:
        return 'nav-wrap1';
        break
    }
  }
  module.exports.styleType = styleType;
</wxs>

wxss

/* 頂部要固定定位   標題要居中   自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */
.nav-wrap {
  position: fixed;
  width: 100%;
  top: 0;
  background: transparent;
  color: #000;
  z-index: 9999999;
}
.nav-wrap1 {
  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: 36rpx;
  color: #2c2b2b;
  font-weight: 600;
}
 
.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: 32rpx;
   height: 36rpx;
  margin-top: 4rpx;
  padding: 10rpx;
}
.nav-capsule .back-home {
  width: 60rpx;
  height: 60rpx;
  margin-top: 3rpx;
}
  

最後一步

我們需要在元件的json檔案中加上 “component”: true,

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

元件就可以使用啦

以下是元件的展示：

這是我們返回首頁的圖示！圖示自己找

引入方法！
我們要在我們需要引入的檔案的json檔案中加入我們需要引入的元件

json

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

引入元件後我們需要在wxml中展示出來

wxml

<view>
  <nav-bar navbar-data='{{nvabarData}}'></nav-bar>
</view>

在js的data中加入我們需要傳入元件的內容

 nvabarData: {
       home:"../../img/登入頭像.svg",
      showCapsule: 1, //是否顯示左上角圖示   1表示顯示    0表示不顯示
      title: '匯停無憂', //導航欄 中間的標題
    },

當我們需要透明導航欄時

我們只需要在js檔案加入background:1,就可以了

 nvabarData: {
      background:1,
      showCapsule: 1, //是否顯示左上角圖示   1表示顯示    0表示不顯示
      title: '', //導航欄 中間的標題
      pic:"../../img/arrow-right-fff.svg",//返回上一頁圖示
    },

需要把膠囊變成白色的可以在json檔案中改變：
膠囊現在只有白色和黑色兩種樣式，預設為黑色。

{
  "navigationBarTextStyle": "white",
  "usingComponents": {
    "nav-bar": "/components/bar/index"
  }
}

圖示 自己可以更換！
頂部導航欄就做完啦！
歡迎大家一起交流學習！