uniapp-自定义导航栏

# 自定义导航栏

# 中心思想

取消默认导航栏或原生导航栏。
自定义导航栏，并放置到正确位置。

# 取消默认导航栏或原生导航栏

取消默认导航栏或原生导航栏有两个方式：

全局取消原生导航栏

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

1
2
3
4
5
6
7

单页面取消原生导航栏

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

1
2
3
4
5
6
7
8
9
10
11
12
13

# 取消原生导航栏后是这样的

取消原生导航栏后，页面顶部直通状态栏区域。由于窗体为沉浸式，因此页面占据了状态栏位置，导致页面顶部直通状态栏区域。

注意：在微信小程序里，右上角始的胶囊按钮不受取消原生导航栏设置的影响。

# uniapp-计算自定义导航栏高度

导航栏高度 = （胶囊顶部距离 - 状态栏高度） x 2 + 胶囊的高度

<!-- 搜索栏 -->
<view class="search-box" :style="{'height':totalHeight +'px'}">
    <view class="search-input" :style="{'margin-top':menuTop +'px','height':menuHeight +'px'}">
        <image class="serch-image" src="../../../static/icon/png/search.png" ></image>
        <text>搜索</text>
    </view>
</view>

data() {
    return {
        system:[],
        menu:[],
        statusBarHeight: 0, //状态栏的高度 
        navigatorHeight: 0, //导航栏高度
        menuHeight: 0, //胶囊高度
        menuTop: 0, //胶囊与顶部的距离
        totalHeight: 0, //总高度        
    }
},
onLoad() {            
    //获取系统信息
    uni.getSystemInfo({
        success: res => {
            this.system = res
        }
    })
    //获取胶囊信息
    this.menu = uni.getMenuButtonBoundingClientRect()

    //计算组件高度
    this.statusBarHeight = this.system.statusBarHeight //状态栏高度
    this.menuHeight = this.menu.height //胶囊高度
    this.menuTop = this.menu.top //胶囊与顶部的距离

    //导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度
    this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height 

    //总高度 = 状态栏的高度 + 导航栏高度    
    this.totalHeight = this.statusBarHeight + this.navigatorHeight 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# CSS变量

1、--status-bar-height

2、--window-top 内容区域距离顶部的距离。

3、--window-bottom 内容区域距离底部的距离。

上次更新: 2024/08/14, 04:14:33

← uniapp-设置全局变量 uniapp-跨域→