我们开发中经常会碰到设计搞更改头部,而微信小程序自带的头部又不支持编辑,微信特提供了去掉头部自己编辑的方法
1.先在app.json中去掉微信自带的头部
在window属性中配置"navigationStyle": "custom",去掉头部
"window": {
"navigationBarBackgroundColor": "#0081ff",
"navigationBarTitleText": "wexin",
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
},
2.计算头部高度
在app.vue中
onLaunch: function() {
uni.getSystemInfo({
success: function(e) {
Vue.prototype.statusHeight = e.statusBarHeight;
let menu = wx.getMenuButtonBoundingClientRect();
Vue.prototype.menu = menu;
Vue.prototype.barHeight = menu.bottom + menu.top - e.statusBarHeight;
})