uniapp 电商app 设置自定义导航栏（状态栏占位）

淩亂°似流年 2021-07-25 20:30 891阅读 0赞

## 自定义导航栏的设置 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]

### 设置方法：pages.json ###

{ 
    	"path": "pages/index/index",
    	"style": { 
    		// #ifdef MP 
    		"navigationBarTitleText": "多典商城",
    		// #endif 
    		"enablePullDownRefresh":true,
    		"navigationStyle":"custom"
    	}
    }

![在这里插入图片描述][20200821113325540.png_pic_center]

设置 “navigationStyle”为"custom",即：custom即取消默认原生导航栏。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]

此时我这边的处理方式：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]  
`<view class="zhanwei"></view>`为占位（状态栏）的标签  
`<view class="daohang"></view>`为导航栏的部分

css样式如下：

.zhanwei{ 
    	height: var(--status-bar-height);//设置状态栏高度为状态栏的高度
    	//状态栏高度的获取方式为：--status-bar-height
    	width:750upx;
    	background:#EA3939;
    	position: fixed;//固定定位，能够让占位标签始终占据状态栏的部分，背景颜色与导航栏颜色一致，是为了美观
    	top:0;
    	left:50%;
    	transform: translateX(-50%);
    	z-index:99;
    }
    //导航栏部分的css样式
    .daohang{ 
    	width:750upx;
    	padding:0upx 25upx;
    	box-sizing: border-box;
    	background:#EA3939;
    	z-index:99;
    	display: flex;
    	justify-content: space-between;
    	font-size:30upx;
    	align-items: center;
    	height:80upx;
    	line-height: 80upx;
    	position: fixed;
    	top:var(--status-bar-height);//固定定位，top高度为状态栏的高度，也就是位于状态栏的下方。
    	left:50%;
    	transform: translateX(-50%);
    	//以下的代码为导航栏中的 文字 搜索框 图标的样式设置
    	view{ 
    		background:rgba(255,255,255,.9);
    		width:100%;
    		height:60upx;
    		line-height: 60upx;
    		margin:0 10upx;
    		border-radius: 30upx;
    		padding:0 20upx;
    		text{ 
    			color:#aaa;
    			font-size:28upx;
    			text{ 
    				padding-left:20upx;
    			}
    		}
    	}
    	image{ 
    		width:52upx;
    		flex-shrink: 0;
    	}
    	text{ 
    		flex-shrink: 0;
    		color:#fff;
    	}
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]  
最终的显示效果如上图所示：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/453b3215c78541718ecb6deaf68c47d0.png
[20200821113325540.png_pic_center]: /images/20210725/f5d81dca86c742cb940880ed23fa66ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/45ea4bd7ab384ce694306c2db2ff1ff6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/01f265db0148446ea9ae2284e65e41a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/7a457c9181634208b39ee05a4fc6b9c1.png