微信小程序如何自定义导航栏,怎么确定导航栏及状态栏的高度?导航栏被刘海、信号图标给覆盖了怎么办?

声明:本文为了演示效果,颜色采用的比较显眼,可根据实际情况修改颜色

问题描述

当我们在JSON中将navigationStyle设置成custom后,当前页面的顶部导航栏就需要我们制作了,但出现了一下几个问题:

  1. 导航栏的高度该是多少?
  2. 导航栏被刘海、信号图标给覆盖了,就像下面

分析

整个顶部导航栏部分实际上是分为两部分的,分别是状态栏导航栏,所以需要对两部分都进行处理

解决方法

1. 导航栏高度该是多少?

安卓手机建议设置48px,iOS手机建议设置44px

怎么获取当前是iOS还是安卓

通过Apiwx.getSystemInfo()获取其中的system(操作系统及版本)字段,看其中是否包含iOS字符串

示例:

html 复制代码
<view style="background-color: blue;height: {{navBarHeight}}px;text-align: center;color: #ffffff;line-height: {{navBarHeight}}px;">导航栏</view>
<!-- 这里的样式比较简单,自行丰富 -->
js 复制代码
Page({
    data: {
        navBarHeight: 48
    },
    onLoad() {
        var that = this;
        wx.getSystemInfo({
            success(res) {
                let nav = 48; // 默认为48px
                // 判断是否是iOS
                if (res.system.indexOf('iOS') > -1) {
                    nav = 44
                }
                that.setData({
                    navBarHeight: nav
                })
            }
        })
    }
})

2. 导航栏被刘海、信号图标给覆盖了

这里的原因就是没有设置状态栏部分的高度,需要获取设备的状态栏高度

怎么获取?

还是通过Apiwx.getSystemInfo()获取其中的statusBarHeight(状态栏的高度,单位px)字段

示例:

html 复制代码
<view style="background-color: brown;height: {{statusBarHeight}}px;"></view>
<!-- 我这里是通过高度支撑的,也可以通过外边距等实现布局 -->
js 复制代码
Page({
    data: {
        statusBarHeight: 22
    },
    onLoad() {
        var that = this;
        wx.getSystemInfo({
            success(res) {
                that.setData({
                    statusBarHeight: res.statusBarHeight
                })
            }
        })
    }
})

汇总

html 复制代码
<view style="background-color: brown;height: {{statusBarHeight}}px;"></view>
<view style="background-color: blue;height: {{navBarHeight}}px;text-align: center;color: #ffffff;line-height: {{navBarHeight}}px;">导航栏</view>
js 复制代码
Page({
    data: {
        statusBarHeight: 22,
        navBarHeight: 48
    },
    onLoad() {
        var that = this;
        wx.getSystemInfo({
            success(res) {
                // 获取状态栏高度及是否是iOS设备
                let nav = 48; // 默认为48px
                // 判断是否是iOS
                if (res.system.indexOf('iOS') > -1) {
                    nav = 44
                }
                that.setData({
                    statusBarHeight: res.statusBarHeight,
                    navBarHeight: nav
                })
            }
        })
    }
})

扩展

wx.getSystemInfo用来获取系统信息

相关推荐
编程千纸鹤3 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域3 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
丁总学Java15 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域16 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86816 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650217 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck1 天前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节