目錄

• 前言
• 什么是自定義導航欄
• 自定義導航欄
• • 取消默認導航欄或原生導航欄
  • • 全局取消原生導航欄
    • 單頁面取消原生導航欄
    • 取消原生導航欄后是這樣的
  • 自定義導航欄
• 自定義導航欄組件

前言

• Hbuilder X 2.7.14.20200618

什么是自定義導航欄

默認導航欄或原生導航欄是啥樣的，你懂的。

但，我想給導航欄加個背景圖，比如這樣：

我想給導航欄背景設置成漸變，比如這樣：

這時候就需要自定義導航欄。

自定義導航欄

自定義導航欄的中心思想是：

取消默認導航欄或原生導航欄。

自定義導航欄，并放置到正確位置。

取消默認導航欄或原生導航欄

取消默認導航欄或原生導航欄有兩個方式：

全局取消原生導航欄

單頁面取消原生導航欄

全局取消原生導航欄

在 pages.json 的 globalStyle 里有個 navigationStyle 配置項，默認是default。navigationStyle=default 時，所有頁面均為原生導航欄；navigationStyle=custom時，所有頁面都沒有原生導航欄。

... "globalStyle": {..."navigationStyle": "custom",... }, ...

單頁面取消原生導航欄

在 pages.json 的 pages 配置項下每個頁面均有個 navigationStyle 配置項，默認是default。navigationStyle=default 時，該頁面均為原生導航欄；navigationStyle=custom時，該頁面都沒有原生導航欄。

... "pages": [ {"path" : "pages/index/index","style" : {"navigationBarTitleText" : "首頁","navigationStyle":"custom",...}},... ], ...

取消原生導航欄后是這樣的

取消原生導航欄后，頁面頂部直通狀態欄區域。
由于窗體為沉浸式，因此頁面占據了狀態欄位置，導致頁面頂部直通狀態欄區域。

注意：在微信小程序里，右上角始的膠囊按鈕不受取消原生導航欄設置的影響。

自定義導航欄

自定義導航欄可以理解為出現在原生導航欄區域的頁面元素。

假設要在導航欄中添加LOGO，實現如下效果：

在 pages.json 的 pages 配置項下， 修改 pages/index/index 頁面的配置如下：

"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","navigationStyle":"custom"}} ],

pages/index/index 代碼為

<template><view><!-- 自定義導航欄 --><view class="navBarBox"><!-- 狀態欄占位 --><view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view><!-- 真正的導航欄內容 --><view class="navBar"><image class="logo" src="/static/logo.png" mode="scaleToFill"></image><view>我是導航欄標題</view></view></view><!-- 頁面內容 --><view>我是頁面內容</view></view> </template><script>export default {data() {return {// 狀態欄高度statusBarHeight: 0,// 導航欄高度navBarHeight: 82+11,};},props: {},//第一次加載時調用created() {//獲取手機狀態欄高度this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];},} </script><style> .navBarBox{} .navBarBox .statusBar {} .navBarBox .navBar {padding: 3rpx 50rpx;padding-bottom: 8rpx;display: flex;flex-direction: row;justify-content: center;align-items: center; } .navBarBox .navBar .logo {width: 82rpx;height: 82rpx;margin-right: 10rpx; } </style>

說明：

• 頁面加載后，計算導航欄高度。
• 得到狀態欄高度后，將狀態欄高度賦值給狀態欄占位元素。這樣就空出了狀態欄。注意狀態欄的單位為px，其它地方使用的單位為rpx。
• 導航欄中放置一個image元素，用于展示LOGO。再放一個view元素，用于展示標題。

運行到小程序模擬器，得到前面想要的效果。

自定義導航欄組件

在uni-app插件市場搜索導航欄插件，可以輕松實現自定義導航欄。
如果找不到合適的，可以按照前面的步驟自己編寫。

總結

以上是生活随笔為你收集整理的【uni-app】自定义导航栏/标题栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。