微信小程序添加页面顶部固定标题栏navigationBar，以及部分页隐藏

最新推荐文章于 2025-03-19 17:37:25 发布

Ronion123

最新推荐文章于 2025-03-19 17:37:25 发布

阅读量3k

点赞数 7

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/Ronion123/article/details/135599546

版权

1.在各个页添加头部固定样式，可以在app.json内设置

navigationBarTitleText：标题名称

2.当某个页不需要头部样式，需要覆盖全屏只留下返回胶囊时，可以在指定page页下的json文件内添加"navigationStyle": "custom"

navigationStyle：导航栏样式

3.当不使用官方的标题栏时，你也可以设计自己的头部栏，下面是我自己的，效果为logo图靠左居中(靠左是考虑到部分手机的灵动岛遮挡)，大家可以自己更改细节

wxml文件

<view class="navigationBarLogo">
  <view class="navigationBarImg">
    <image mode="widthFix" style="width: 250rpx;" src="{{homeLogo}}" />
  </view>
</view>

wxss文件

.navigationBarLogo {
  height: 9%;
  z-index: 100;
  width: 100%;
  position: relative;
}

.navigationBarImg {
  padding-left: 5%;
  position: absolute;
  bottom: 10%;
}