例如：创建个navigationMixin.js文件

export const systemInfo = { data: () => ({ statusBarHeight: 0, navigationBarHeight: 0, navigationBarHeight1: 0,//导航栏高度 navHeight: 0, jnWidth:0, jnHeight:0, jnTop: 0,//胶囊距离顶部高度 jnRight:0,//胶囊距离右侧宽度 jnLeft: 0, windowHeight: 0, // 可使用窗口高度 jnBottom: 0, }), methods: { // 获取设备信息 getSystemInfo() { // 状态栏高度 this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // #ifdef MP-WEIXIN // 获取微信胶囊的位置信息 width,height,top,right,left,bottom const custom = wx.getMenuButtonBoundingClientRect() // console.log(custom) // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2 this.navigationBarHeight1 = custom.height + (custom.top - this.statusBarHeight) * 2; // 胶囊高度 this.navigationBarHeight = custom.height; this.jnWidth = custom.width; this.jnTop = custom.top; this.jnRight = custom.right; this.jnBottom = custom.bottom, this.jnHeight = custom.height; this.jnLeft = custom.left; // 总体高度 = 状态栏高度 + 导航栏高度 this.navHeight = this.navigationBarHeight + this.statusBarHeight // #endif }, }, }

顶部自定义导航栏使用

按需引入