900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 小程序自定义导航栏安卓和苹果全面屏不兼容--转载

小程序自定义导航栏安卓和苹果全面屏不兼容--转载

时间:2024-02-22 10:17:43

相关推荐

小程序自定义导航栏安卓和苹果全面屏不兼容--转载

原文链接:

/fall_in_love_with/article/details/97115125?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-2

以下是代码

在app.js里面

App({globalData: {statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']}})

在需要的页面的onload里面

// 获取系统状态栏信息wx.getSystemInfo({success: e => {this.globalData.StatusBar = e.statusBarHeight;this.globalData.CustomBar = e.platform == 'android' ? e.statusBarHeight + 50 :e.statusBarHeight + 45;}});},

Wxml 自定义顶部栏view结构加上

style="padding-top:{{statusBarHeight}}px" //在wxml 获取顶部的高度<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px"><text>demo</text></view><view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

也可以在app.js中设置一个公共样式 (自己决定)

.custom{position: fixed;width: 100%;top: 0;left: 0;height: 45px;background: #2C5CFF;z-index: 999;}.custom text{color: #fff;font-size: 34rpx;font-weight: 500;max-width: 280rpx;}.empty_custom{height: 45px;width: 100%;}

在index.js中取出statusBarHeight值

Page({data:{statusBarHeight: app.globalData.statusBarHeight}})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。