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

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

navigationBarTitleText:标题名称

1

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

  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现微信小程序自定义navigationbar顶部导航栏的兼容适配,首先需要明确几个关键点。 1. 自定义导航栏的设计:根据产品需求和界面设计,确定导航栏的样式、背景色、标题和按钮等元素。 2. 获取手机屏幕的尺寸:小程序可以使用`wx.getSystemInfoSync()`方法获取手机屏幕的尺寸信息。 3. 设置导航栏高度:根据系统的不同,导航栏的高度也会有所差异。可以把导航栏的高度设置为一个相对较大的值,以适应大部分机型。当实际机型不同导航栏高度时,可以根据不同机型进行适配。 4. 适配不同机型的刘海屏或异形屏:对于刘海屏或者异形屏的机型,需要判断屏幕顶部是否存在刘海等异形部分,并进行相应的适配。可以使用`wx.getMenuButtonBoundingClientRect()`方法来获取右上角胶囊按钮的位置信息,从而确定导航栏背景的偏移和大小。 5. 设置页面顶部内边距:在有自定义导航栏的情况下,为了避免导航栏遮挡页面内容,需要设置页面顶部内边距。 6. 适配多端:微信小程序支持在不同的平台上运行,如iOS、Android、小程序开发工具等。因此要确保自定义导航栏在不同平台上的显示效果一致。 综上所述,通过了解手机屏幕尺寸、设置导航栏高度和背景、适配刘海屏、设置页面内边距以及多端适配等步骤,可以实现微信小程序自定义navigationbar顶部导航栏的兼容适配,使其在不同机型上都能够正常显示和使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值