微信小程序自定義頂部導航

注釋：自定義導航需要自備相應圖片

一、設置自定義頂部導航

　　Navigation是小程序的頂部導航組件，當頁面配置navigationStyle設置為custom的時候可以使用此組件替代原生導航欄。

　　1.全局頂部導航自定義，在app.json的“window”里添加"navigationStyle": "custom"

 

　　2.只在某一個頁面自定義頂部導航，在該頁面的json文件里添加"navigationStyle": "custom"

 

二、獲取手機屏幕數據，app.js

//app.js
const Utils = require('./utils/utils')
App({
  onLaunch: function () {
    // 獲取屏幕參數
    try {
      const res = wx.getSystemInfoSync()
      if (res.platform == 'ios') {
        this.globalData.platform = 'ios'
      } else if (res.platform == 'android') {
        this.globalData.platform = 'android'
      }
      // 導航高度
      let navHeight = res.statusBarHeight 
      // 屏幕寬度/高度，單位px
      this.globalData.screenWidth = res.screenWidth
      this.globalData.screenHeight = res.screenHeight
      // 狀態欄的高度，單位px
      this.globalData.statusBarHeight = res.statusBarHeight
      // 設備像素比
      this.globalData.pixelRatio = res.pixelRatio
      // 可使用窗口寬度，單位px
      this.globalData.winWidth = res.windowWidth
      // 安卓時，膠囊距離狀態欄8px，iOS距離4px
      if (res.system.indexOf('Android') !== -1) {
        this.globalData.navHeight = navHeight + 14 + 32
        this.globalData.navTitleTop = navHeight + 8
        // 視窗高度 頂部有占位欄時
        this.globalData.winHeight = res.screenHeight - navHeight - 14 - 32
        // tab主頁視窗高度
        this.globalData.winHeightTab = res.windowHeight - navHeight - 14 - 32
      } else {
        this.globalData.navHeight = navHeight + 12 + 32
        this.globalData.navTitleTop = navHeight + 4
        // 視窗高度 頂部有占位欄時
        this.globalData.winHeight = res.screenHeight - navHeight - 12 - 32
        // tab主頁視窗高度
        this.globalData.winHeightTab = res.windowHeight - navHeight - 12 - 32
      }
      console.log(wx.getSystemInfoSync(), this.globalData.winHeightTab)
    } catch (e) {
      console.log(e)
    }
  },
  globalData: {
    platform: 'ios',
    pixelRatio: 2,
    statusBarHeight: 20,
    navHeight: 64,
    navTitleTop: 26,
    winHeight: 655,
    winWidth: 750,
    screenWidth: 375,
    screenHeight: 812
  }
})

 

三、封裝導航組件，根目錄創建components/navbar文件夾，創建Component

<!--navbar.wxml-->
<view>
  <view class="nav-bar {{isWhite=='true'?'nav-bar-white':''}}" style="height: {{navHeight}}px;background-color:{{navColor}};" catchtap="toTop">
    <text class="navbar-title" style="top:{{navTitleTop}}px;color:{{navTitleColor}};">{{navTitle}}</text>
    <view wx:if="{{noArrow=='false'&&isArrowWhite=='false'&&isNavHome=='false'}}" catchtap="navBack" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;">
      <image class="navbar-icon" src="../../images/arrow_left.png"></image>
    </view>
    <view wx:if="{{isArrowWhite=='true'&&isNavHome=='false'&&noArrow=='false'}}"  catchtap="navBack" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;">
      <image src="../../images/arrow_left_white.png" class="navbar-icon"></image>
    </view>
    <view wx:if="{{isNavHome=='true'&&isArrowWhite=='false'&&noArrow=='false'}}" catchtap="navHome" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;">
      <image src="../../images/[e-mail]" class="navbar-icon"></image>
    </view>
    <view wx:if="{{isNavHome=='true'&&isArrowWhite=='true'&&noArrow=='false'}}"  catchtap="navHome" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;">
      <image src="../../images/Home@3x_white.png" class="navbar-icon"></image>
    </view>
  </view>
  <view wx:if="{{isWhite=='true'}}" class="nav-bar-place" style="height: {{navHeight}}px;background-color:{{navColor}};"></view>
</view>

// navbar.js
const app = getApp()
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    navHeight: {
      type: Number,
      value: 20
    },
    navTitleTop: {
      type: Number,
      value: 26
    },
    navTitle: { // 導航標題 可以為空
      type: String,
      value: ''
    },
    navTitleColor: { // 導航標題顏色 默認黑色
      type: String,
      value: '#000'
    },
    isWhite: { // 是否為白底
      type: String,
      value: 'true'
    },
    noArrow: { // 取消返回箭頭
      type: String,
      value: 'false'
    },
    isArrowWhite: {//白色箭頭
      type: String,
      value: 'false'
    },
    isNavHome: { // 返回首頁
      type: String,
      value: 'false'
    },
    navColor: { // 導航欄背景色 默認白色
      type: String
    },
    backPath: { // 返回頁面路徑
      type: String,
      default: ''
    },
    backDelta: { // 返回頁面層數
      type: Number,
      default: 1
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    navHeight: 0,
    navTitleTop: 0
  },
  attached() {
    // 在組件實例進入頁面節點樹時執行
    // 獲取頂部導航高度
    this.setData({
      navHeight: app.globalData.navHeight,
      navTitleTop: app.globalData.navTitleTop
    })
  },
  /**
   * 組件的方法列表
   */
  methods: {
    // 回到首頁
    navHome:function(){
      wx.switchTab({
        url: '/pages/index/index'
      })
    },
    // 回到頂部
    toTop: function () {
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
      this.triggerEvent('scrollEvent', {}) // 可綁定點擊標題欄時的事件
    },
    // 返回上一頁
    navBack: function () {
      if (this.properties.backPath === '') {
        wx.navigateBack({
          delta: this.properties.backDelta
        })
      } else {
        wx.redirectTo({
          url: this.properties.backPath
        })
      }
      this.triggerEvent('backEvent', {}) // 可綁定點擊返回時的事件
    }
  }
})

/* navbar.wxss */
/*自定義導航欄*/
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
}

.nav-bar-white {
  background-color: #fff;
}

.navbar-title {
  position: absolute;
  height: 32px;
  line-height: 32px;
  /* width: 100%; */
  width: 320rpx;
  text-align: center;

  font-size: 16px;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  left: 28%;
}

.navbar-icon-wrap {
  position: absolute;
  left: 9px;
  width: 44px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-icon {
  width: 44px;
  height: 32px;
}

.navbar-scan {
  width: 28px;
  height: 28px;
}

四、引入組件（頁面的json文件）

 

 

 

五、使用組件（根據屬性可以自由配置導航，這里例舉幾個樣式，也可以根據自己需求更改組件）

 <navbar navTitle="頂部導航demo" style="width:200rpx;"></navbar>

 

 

—————————————————————————————————

<navbar navTitle="無返回頂部導航" noArrow="true"></navbar>

 

—————————————————————————————————

  <navbar navTitle="透明導航" isWhite="false" isArrowWhite='true' navTitleColor="#fff"></navbar>

—————————————————————————————————

  <navbar navTitle="主頁按鈕導航" isNavHome='true' isArrowWhite='false' noArrow='false'></navbar>