一、在app.json设置navigationStyle自定义
"window": {"navigationStyle": "custom"}
二、在app.js中计算出状态栏的高度
App({globalData:{navHeight: 0, // 导航高度navTop: 0, //胶囊按钮与顶部的距离statusBarHeight: 0, // 状态栏高度systemData:{}}onLaunch: function() {//获取系统信息this.getSystemData();},getSystemData(){let menuButtonObject = wx.getMenuButtonBoundingClientRect();wx.getSystemInfo({success: res => {this.globalData.systemData = res ? res : {};let statusBarHeight = res.statusBarHeight,navTop = menuButtonObject.top, //胶囊按钮与顶部的距离navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度this.globalData.navHeight = navHeight;this.globalData.navTop = navTop;this.globalData.statusBarHeight = res.statusBarHeight;console.log(this.globalData)}})}})
三、自定义组件header
header.wxml
<cover-view class="header" style="height: {{navHeight}}px;background-color:{{background}};"><cover-view wx:if="{{showBack}}" bindtap="back" class="btn-back" style="top:{{navTop+8}}px"><cover-image src="{{backImg}}" class="img" ></cover-image></cover-view><cover-view wx:if="{{title}}" style="margin-top: {{navTop}}px;line-height:{{(navHeight-navTop)}}px;color: {{color}};">{{title}}</cover-view><cover-view wx:else style="margin:{{navTop}}px auto 0" class="logo"><cover-image bindtap="back" src="{{imageSite}}/logo_top.png" class="img" ></cover-image></cover-view></cover-view>
header.js
const app = getApp();Component({/*** 组件的属性列表*/properties: {background: { //背景色type: String,value: "none"},color: { //字体颜色type: String,value: "#333333"},title: { //标题type: String,value: ""},showBack: { //是否显示返回按钮type: Boolean,value: true},backImg:{ //返回按钮图片地址type: String,value: "btn-back.png"}},/*** 组件的初始数据*/data: {navHeight: app.globalData.navHeight,navTop: app.globalData.navTop,statusBarHeight: app.globalData.statusBarHeight,imageSite: app.globalData.imageSite, //服务器地址},/*** 组件的方法列表*/methods: {back() {var pagelist = getCurrentPages();if (pagelist.length > 1) {wx.navigateBack({delta: 1})} else {wx.reLaunch({url: '/pages/index/index',})}},},ready() {}})
css就不展示了
四、在组件中的使用
index.js中设置高度
const app = getApp()Page({data: {navHeight:app.globalData.navHeight,},})
index.html中引入组件
<header title="首页"></header><view style="margin-top:{{navHeight+8}}px">内容</view>
