设置导航栏为自定义
"navigationStyle": "custom"
{
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black",
"navigationStyle": "custom"
},
}
- index.js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
statusHeight: 0,
menuTop: 0,
menuHeight: 0
},
onLoad() {
// 获取状态栏的高度
wx.getSystemInfo({
success: (result) => {
console.log(result)
this.setData({
statusHeight: result.statusBarHeight
})
},
})
// 获取胶囊的高度和top值
let menu = wx.getMenuButtonBoundingClientRect()
let menuTop = menu.top - this.data.statusHeight;
this.setData({
menuTop: menuTop,
menuHeight: menu.height
})
},
})
- index.wxml
<view class="status-bar1" style="{height: {{statusBarHeight + 'px'}}'}">
{{statusHeight}}
</view>
<view class="menu" style="height: {{menuHeight + 'px'}};margin-top: {{menuTop +'px'}}">
首页
</view>
- index.wxss
.status-bar1 {
background-color: #ff6600;
}
.menu {
background-color: #00f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
在这里插入图片描述
