溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要給大家介紹了關于微信小程序自定義導航的相關內容，詳細代碼請見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 >
<view class="header" >
<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 >
<view class="header" >
<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>
效果如下圖，加載動畫我可能寫的不太好看
問題：這樣做在iPhone上是能正常展示的，但是在安卓上還有一點小問題，自定義導航欄的標題和圖標有一起滑動
注意點
（1）安卓手機下拉刷新還是會有一點點展示問題
（2）項目所有fixed的元素都需要改，top需要加上導航欄的高度
目前哪些小程序在用自定義導航欄
我所知道的有 “bilibili”，"票圈長視頻"，我們公司的小程序也在計劃用
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
