小程序自定义顶部导航栏

小程序原生顶部导航栏

(1)在app.json中全局设置

(2)在单个页面的json中设置

在使用原生导航栏时,跳转到下一个页面(不关闭当前页面)时,新打开页面的左上角默认有返回按钮,点击返回即可回到上一个页面,但是在实际开发中,原生的标题栏满足不了开发需求,例如,我们需要给左上角添加回到首页按钮,这种情况就必须定制化的标题栏了

小程序自定义顶部导航栏

(1)app.json中设置navigationStyle样式


(2)获取页面的状态栏高度

当(1)中值设置为custom时,页面的标题栏就没有了。

在app.js的onLaunch中使用wx.getSystemInfo()方法获取设备信息,在此处用wx.getSystemInfoSync()同步方法无法获取信息

        iphoneX调用该方法获取的数据如下:(windowHeight为窗口可见高度,screenHeight为屏幕高度,statusBarHeight为状态栏高度,即显示电量和时间的那一块区域)

在有些手机端中获取的windowHeight和screenHeight一致,这样就不能准确的获取窗口可见高度了

标题栏高度:

iPhone’: 64,

‘iPhone X’: 88,

‘android’: 68

搬来的图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容