微信小程序自定義導航教程（兼容各種手機）

2019-11-19 12:21:16

字體：大中小

來源：轉載

供稿：網友

前言

本文主要給大家介紹了關于微信小程序自定義導航的相關內容，詳細代碼請見github，請點擊地址（本地下載），其中有原生小程序的實現，也有wepy版本的實現

了解小程序默認導航

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

所以我們要實現一個兼容不同手機的導航必須要根據不同的手機實現statusBarHeight和titleBarHeight

第一步：全局設置

把app.json中的window中的navigationStyle設置為custom，官方文檔鏈接

設置完之后發現導航欄變成了如下圖所示，只剩下了右上角膠囊按鈕

第二步：確定導航欄兩部分的高度

（1）確定第一部分statusBarHeight的高度，這部分是手機用來展示時間，信號和手機電量的，我們可以從wx.getSystemInfo從獲得

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

（2）第二部分titleBarHeight為小程序導航欄的高度，經過我查詢無數文檔和實踐得知，在iPhone上titleBarHeight=44px，在安卓上titleBarHeight = 48px

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

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 }); }})

第三步：編寫Navigation組件

（1）Navigation.js

const app = getApp();Component({ properties: { //小程序頁面的標題 title: {  type: String,  default: '默認標題' }, //是否展示返回和主頁按鈕 showIcon: {  type: Boolean,  default: true } }, data: { statusBarHeight: 0, titleBarHeight: 0, }, ready: function () { // 因為每個頁面都需要用到這連個字段，所以放到全局對象中 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就不貼了，有點多，需要的朋友可以去的github上拿點擊地址（本地下載）

第四步：展示效果

iPhone X展示效果

iPhone 7展示效果

小米8展示效果

用我們公司的測試機基本上都試了一遍，基本上都能正常顯示，別問我為什么樣式和右邊這么相似，因為我是叫公司設計給了我樣式

解決下拉刷新的問題

圖一為默認導航下的下拉刷新，顯示正常，圖二為自定義導航欄下的下拉刷新，顯示異常，中間有一大塊空白。

如果解決這個問題，我們自定義一個加載動畫，藏在導航底下

（1）把app.json中的window設置為如下，這樣加載動畫就隱藏了，因為加載動畫必須要設置window的backgroundTextStyle=black和backgroundColor=#F3F3F3才會顯示如上圖所示

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>

效果如下圖，加載動畫我可能寫的不太好看