快捷導(dǎo)航

微信小程序自定義導(dǎo)航教程（兼容各種手機(jī)）

更新時(shí)間：2018年12月12日 08:58:01 作者：面包大蝦

這篇文章主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航的相關(guān)內(nèi)容，文中通過(guò)示例代碼介紹的非常詳細(xì)，兼容各種手機(jī),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航的相關(guān)內(nèi)容，詳細(xì)代碼請(qǐng)見(jiàn)github，請(qǐng)點(diǎn)擊地址（本地下載），其中有原生小程序的實(shí)現(xiàn)，也有wepy版本的實(shí)現(xiàn)

了解小程序默認(rèn)導(dǎo)航

如上圖所示，微信導(dǎo)航分為兩部分，第一個(gè)部分為statusBarHeight，劉海屏手機(jī)（iPhone X，小米8等）會(huì)比其他的手機(jī)高很多，第二部分為titleBarHeight，安卓和IOS的高度不同，但是IOS高度是一樣的，IOS高度是一樣的,

所以我們要實(shí)現(xiàn)一個(gè)兼容不同手機(jī)的導(dǎo)航必須要根據(jù)不同的手機(jī)實(shí)現(xiàn)statusBarHeight和titleBarHeight

第一步：全局設(shè)置

把a(bǔ)pp.json中的window中的navigationStyle設(shè)置為custom，官方文檔鏈接

設(shè)置完之后發(fā)現(xiàn)導(dǎo)航欄變成了如下圖所示，只剩下了右上角膠囊按鈕

第二步：確定導(dǎo)航欄兩部分的高度

（1）確定第一部分statusBarHeight的高度，這部分是手機(jī)用來(lái)展示時(shí)間，信號(hào)和手機(jī)電量的，我們可以從wx.getSystemInfo從獲得

wx.getSystemInfo({
 success: function(res) {
 console.log(res.statusBarHeight)
 }
})

（2）第二部分titleBarHeight為小程序?qū)Ш綑诘母叨?，?jīng)過(guò)我查詢無(wú)數(shù)文檔和實(shí)踐得知，在iPhone上titleBarHeight=44px，在安卓上titleBarHeight = 48px

（3）最后總結(jié)一下微信小程序的高度代碼為

wx.getSystemInfo({
 success: function(res) {
 let titleBarHeight = 0
 if (res.model.indexOf('iPhone') !== -1) {
  titleBarHeight = 44
 } else {
  titleBarHeight = 48
 }
 that.setData({
  statusBarHeight: res.statusBarHeight,
  titleBarHeight: titleBarHeight
 });
 },
 failure() {
 that.setData({
  statusBarHeight: 0,
  titleBarHeight: 0
 });
 }
})

第三步：編寫(xiě)Navigation組件

（1）Navigation.js

const app = getApp();
Component({
 properties: {
 //小程序頁(yè)面的標(biāo)題
 title: {
  type: String,
  default: '默認(rèn)標(biāo)題'
 },
 //是否展示返回和主頁(yè)按鈕
 showIcon: {
  type: Boolean,
  default: true
 }
 },

 data: {
 statusBarHeight: 0,
 titleBarHeight: 0,
 },

 ready: function () {
 // 因?yàn)槊總€(gè)頁(yè)面都需要用到這連個(gè)字段，所以放到全局對(duì)象中
 if (app.globalData && app.globalData.statusBarHeight && app.globalData.titleBarHeight) {
  this.setData({
  statusBarHeight: app.globalData.statusBarHeight,
  titleBarHeight: app.globalData.titleBarHeight
  });
 } else {
  let that = this
  wx.getSystemInfo({
  success: function(res) {
   if (!app.globalData) {
   app.globalData = {}
   }
   if (res.model.indexOf('iPhone') !== -1) {
   app.globalData.titleBarHeight = 44
   } else {
   app.globalData.titleBarHeight = 48
   }
   app.globalData.statusBarHeight = res.statusBarHeight
   that.setData({
   statusBarHeight: app.globalData.statusBarHeight,
   titleBarHeight: app.globalData.titleBarHeight
   });
  },
  failure() {
   that.setData({
   statusBarHeight: 0,
   titleBarHeight: 0
   });
  }
  })
 }
 },

 methods: {
 headerBack() {
  wx.navigateBack({
  delta: 1,
  fail(e) {
   wx.switchTab({
   url: '/pages/main/main'
   })
  }
  })
 },
 headerHome() {
  wx.switchTab({
  url: '/pages/main/main'
  })
 }
 }
})

(2) Navigation.wxml

<view style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
 <view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
 <view wx:if="{{showIcon}}" class="title-bar">
  <view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view>
  <view class="line"></view>
  <view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view>
 </view>
 <view class="header-title">{{title}}</view>
 </view>
</view>

css就不貼了，有點(diǎn)多，需要的朋友可以去的github上拿點(diǎn)擊地址（本地下載）

第四步：展示效果

iPhone X展示效果

iPhone 7展示效果

小米8展示效果

用我們公司的測(cè)試機(jī)基本上都試了一遍，基本上都能正常顯示，別問(wèn)我為什么樣式和右邊這么相似，因?yàn)槲沂墙泄驹O(shè)計(jì)給了我樣式

解決下拉刷新的問(wèn)題

圖一為默認(rèn)導(dǎo)航下的下拉刷新，顯示正常，圖二為自定義導(dǎo)航欄下的下拉刷新，顯示異常，中間有一大塊空白。

如果解決這個(gè)問(wèn)題，我們自定義一個(gè)加載動(dòng)畫(huà)，藏在導(dǎo)航底下

（1）把a(bǔ)pp.json中的window設(shè)置為如下，這樣加載動(dòng)畫(huà)就隱藏了，因?yàn)榧虞d動(dòng)畫(huà)必須要設(shè)置window的backgroundTextStyle=black和backgroundColor=#F3F3F3才會(huì)顯示如上圖所示

window: { "navigationStyle": "custom", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "ICY買手店", "navigationBarTextStyle": "black"}

（2）修改Navigation.wxml

<view style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
 <view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
 <view wx:if="{{showIcon}}" class="title-bar">
  <view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view>
  <view class="line"></view>
  <view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view>
 </view>
 <view class="header-title">{{title}}</view>
 </view>
 <view class="loading-wrap"><image class="loading-gif" src="https://dn-testimage.qbox.me/Files/e0/35/e03562502eae6d5944bed747b7c21a3c2cce1ff8_1250.gif"></image></view>
</view>

效果如下圖，加載動(dòng)畫(huà)我可能寫(xiě)的不太好看