①效果圖如下

1.小程序端與膠囊對齊

2.APP端內容區域居中

?

?

注意：上面使用的是colorui里面的自定義導航樣式。

②思路：

1.APP端和小程序端走不同的方法，因為小程序端要計算不同屏幕下右側膠囊的高度。

2.其次最重要的要清晰App端和小程序端的計算邏輯。

3.然后調用api獲取屏幕信息，小程序還需要單獨調用獲取膠囊的api。

系統信息uni.getSystemInfoSync()

小程序端膠囊信息uni.getSystemInfoSync

4.最后寫公共的封裝方法，在多個頁面調用。

小程序端計算方法：

2.1.頭部整體高度 ==狀態欄高度 + 導航欄高度

2.2.導航欄高度 == （膠囊距頂部高度-狀態欄高度） *2 +膠囊高度

2.3.計算導航內容距離頂部高度= 狀態欄高度/2

APP端計算方法：

2.4.計算自定義導航欄的高度=((屏幕高度-狀態欄高度)/需要除的比例)

③實現代碼

3.1、封裝的公共的方法APP端和小程序端

	/** 共用的自定義導航高度位置（App端）* 在頁面中獲取系統信息，并計算自定義導航欄的高度* comNum 計算除數* saveFloat 保留小數位數*/utilsNavbarHeight(screenH, statusH, comNum, saveFloat) {const screenHeight = screenH; // 屏幕高度const statusBarHeight = statusH; // 狀態欄高度var saveFloats = 2if (saveFloat != undefined) {saveFloats = saveFloat}// 計算自定義導航欄的高度const navBarHeight = ((screenHeight - statusBarHeight) / comNum).toFixed(saveFloats); // 例如除以10，可以根據實際需求進行調整return navBarHeight},/**小程序端與膠囊平行*/WechatNavBarHeight() {//獲取狀態欄高度const statusBarHeight = uni.getSystemInfoSync().statusBarHeight//獲取小程序膠囊信息const menu = uni.getMenuButtonBoundingClientRect()//導航欄高度 == （膠囊距頂部高度-狀態欄高度） *2 +膠囊高度const navBarHeightWechat = (menu.top - statusBarHeight) * 2 + menu.height//頭部整體高度 ==狀態欄高度 + 導航欄高度const headerHeight = statusBarHeight + navBarHeightWechat//計算導航內容距離頂部高度= 狀態欄高度/2const topHeight = statusBarHeight / 2 + 'px'return {topHeight,headerHeight}},

3.2、使用自定義導航欄頁面調用

注意：height動態綁定的是navBarHeight，整體導航欄高度

? ? ? ? ? ?top動態邦定的是statusBarHeight，計算后的距頂部高度

//布局
<view class="Content"><!-- 自定義導航 --><view class="navbar"><view class="cu-bar bg-blue search" :style="{'height':navBarHeight}"><view class="rowList" :style="{'top':statusBarHeight}"><view class="action" @click="loca"><text>測試</text><text class="cuIcon-triangledownfill"></text></view><view :class="[isWeixin?'search-form radius wechatNavbar':'search-form radius']"><text class="cuIcon-search"></text><input @tap.stop="InputFocus" :disabled="true" :adjust-position="false" type="text":placeholder="currentWord" confirm-type="search"></input></view><view class="cu-avatar round" @click="addFunction":style="isWeixin ? 'background-image:url(static/images/index/add.png)' : 'background-image:url(/static/images/index/add.png)'"></view></view></view></view>
//初始化數據navBarHeight: null,//導航欄高度statusBarHeight: null,//導航內容距離整體導航欄高度headerHeight: null, //頂部導航整體高度//方法
//計算導航欄高度comNavbarHeight() {// #ifdef APP-PLUSconst devres = this.$system.devInfo()const navBarHeight = this.$system.utilsNavbarHeight(devres.screenHeight, devres.statusBarHeight, 8.6, 2)this.navBarHeight = navBarHeight + 'px'this.statusBarHeight = devres.statusBarHeight / 2 + 'px' //14% 準確來說14%this.headerHeight = navBarHeight// #endif// #ifdef MP-WEIXINconst wechatObj = this.$system.WechatNavBarHeight()this.statusBarHeight = wechatObj.topHeightthis.navBarHeight = wechatObj.headerHeight + 'px'this.headerHeight = wechatObj.headerHeight// #endif},

這樣就可以了，實現過程中也踩了很多坑,有什么問題評論區留言啊！