微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度

一、微信小程序顶部导航栏自定义

"navigationStyle": "custom"

app.json

 "window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "标题","navigationBarTextStyle": "black","navigationStyle": "custom"},

二、根据不同手机自适应距离状态栏高度

2.1、首先在app.js里面获取状态栏高度，并存储为全局变量

获取系统信息wx.getSystemInfo(Object object)

wx.getSystemInfo({success: function (res) {that.globalData.statusBarHeight = res.statusBarHeight}console.log(res.statusBarHeight, 'statusBarHeight')
})

2.2、在所需页面里使用：

.js


//获取应用实例
const app = getApp();
page({ data: {//获取全局变量 导航栏的高度statusBarHeightstatusBarHeight: getApp().globalData.statusBarHeight,},
})

.wxml

<!-- 状态栏 -->
<view style='height: {{statusBarHeight}}px;'></view>
<!-- 标题栏 -->
<view style='height: 44px;'>标题</view>

iphoneX

iphone7

ipadAir2

微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭相关推荐

微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
微信小程序顶部导航栏样式设置（自定义）
效果: 一.要用自定义的导航栏需要在app.json中配置(必须) 取消自带的导航栏:"navigationStyle": "custom" 目前微信小程序不支 ...
微信小程序顶部导航栏点击选项产生颜色变化和底部下划线显示
在很多程序中都有一个功能,就是顶部导航栏点击的时候能自动切换页面,并且选中的模块会变换颜色并且底部出现一条横线. 首先思考这个功能的实现原理--通过"点击"这个动作,我们能知道点击 ...
微信小程序顶部导航栏颜色修改
1.单个页面,在该页面的json文件里修改 (1)修改导航栏颜色: "navigationBarBackgroundColor": "#1556D2", 去除导 ...
微信小程序顶部导航栏
效果图 1.wxml  <view class="navbar"><text wx:for="{{navbar}}&qu ...
微信小程序navigationBarTitleText导航栏标题设置
微信小程序navigationBarTitleText导航栏标题设置全局设置 app.json "window": { "navigationBarTextStyle& ...
微信小程序tabBar导航栏页和其他页执行onLoad与onShow时机；tabBar页获取不到参数问题；navigateTo跳转无效问题；onShow执行两次问题；
1.注意点: 只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码 ...
微信小程序之导航栏样式修改、自定义导航栏及封装
在微信小程序中我们会经常看到不同字样的顶部标题,这样的样式有的是一样的,而有的却又是不同的导航栏,这是怎么回事呢,在这里我们就探讨一下.(微信小程序json文件不能有注释,复制过去的时候有注释记得自行 ...
小程序顶部导航栏标题不居中
小程序默认在andriod中居左,ios中居中解决方法:自定义导航栏 ♦ 小程序去掉顶部导航栏 window: {backgroundTextStyle: 'light',navigationBar ...

微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭

微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度

一、微信小程序顶部导航栏自定义

二、根据不同手机自适应距离状态栏高度

2.1、首先在app.js里面获取状态栏高度，并存储为全局变量

2.2、在所需页面里使用：

微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭相关推荐

最新文章

热门文章