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

自定义导航栏的设置

设置方法：pages.json

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

设置 “navigationStyle”为"custom",即：custom即取消默认原生导航栏。

此时我这边的处理方式：

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

最终的显示效果如上图所示：

本文地址：https://blog.csdn.net/yehaocheng520/article/details/108143889