微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高
工作中开发微信小程序,在原本提供的导航栏无法满足需求的情况下,要进行自定义导航栏来实现我们的需求,针对不同手机大小,做到高度统一,下面我们来看看如何实现
一、微信小程序顶部导航栏自定义
1
| "navigationStyle": "custom"
|
1 2 3 4 5 6 7
| "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "标题", "navigationBarTextStyle": "black", "navigationStyle": "custom" },
|
二、根据不同手机自适应距离状态栏高度
首先在app.js里面获取状态栏高度,并存储为全局变量
获取系统信息wx.getSystemInfo(Object object)
1 2 3 4 5 6
| wx.getSystemInfo({ success: function (res) { that.globalData.statusBarHeight = res.statusBarHeight } console.log(res.statusBarHeight, 'statusBarHeight') })
|
#####在所需页面里使用:
1 2 3 4 5 6 7 8 9
|
const app = getApp(); page({ data: { statusBarHeight: getApp().globalData.statusBarHeight, }, })
|
1 2 3 4
| <view style='height: {{statusBarHeight}}px;'></view>
<view style='height: 44px;'>标题</view>
|
也可以直接写成组件不用每次都取,看自己啦