例如：創(chuàng)建個(gè)navigationMixin.js文件

export const systemInfo = { data: () => ({ statusBarHeight: 0, navigationBarHeight: 0, navigationBarHeight1: 0,//導(dǎo)航欄高度 navHeight: 0, jnWidth:0, jnHeight:0, jnTop: 0,//膠囊距離頂部高度 jnRight:0,//膠囊距離右側(cè)寬度 jnLeft: 0, windowHeight: 0, // 可使用窗口高度 jnBottom: 0, }), methods: { // 獲取設(shè)備信息 getSystemInfo() { // 狀態(tài)欄高度 this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // #ifdef MP-WEIXIN // 獲取微信膠囊的位置信息 width,height,top,right,left,bottom const custom = wx.getMenuButtonBoundingClientRect() // console.log(custom) // 導(dǎo)航欄高度(標(biāo)題欄高度) = 膠囊高度 + (頂部距離 - 狀態(tài)欄高度) * 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; // 總體高度 = 狀態(tài)欄高度 + 導(dǎo)航欄高度 this.navHeight = this.navigationBarHeight + this.statusBarHeight // #endif }, }, }

頂部自定義導(dǎo)航欄使用

按需引入