uniapp implements highly-centered custom navigation content (compatible with APP and mini-programs aligned with capsules)

①The effect picture is as follows

1. Align the applet and capsule

2. The content area on the APP is centered

 

 

Note: The above uses the custom navigation style in colorui.

②Thinking:

1. The APP side and the mini program side use different methods, because the mini program side needs to calculate the height of the right capsule under different screens.

2. The second most important thing is to clarify the calculation logic of the App side and the Mini Program side.

3. Then call the API to obtain the screen information. The applet also needs to separately call the API to obtain the capsule.

System information uni.getSystemInfoSync()

Mini program terminal capsule information uni.getSystemInfoSync

4. Finally, write a public encapsulation method and call it on multiple pages.

Mini program calculation method:

2.1. Overall head height == status bar height + navigation bar height

2.2. Navigation bar height == (capsule height from top - status bar height) *2 + capsule height

2.3. Calculate the height of navigation content from the top = status bar height/2

APP side calculation method:

2.4. Calculate the height of the custom navigation bar = ((screen height - status bar height)/ratio that needs to be divided)

③Implementation code

3.1. Encapsulated public methods on APP side and mini program side

	/*
	 * 共用的自定义导航高度位置（App端）
	 * 在页面中获取系统信息，并计算自定义导航栏的高度
	 * comNum 计算除数
	 * saveFloat 保留小数位数
	 */
	utilsNavbarHeight(screenH, statusH, comNum, saveFloat) {
		const screenHeight = screenH; // 屏幕高度
		const statusBarHeight = statusH; // 状态栏高度
		var saveFloats = 2
		if (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
		//计算导航内容距离顶部高度= 状态栏高度/2
		const topHeight = statusBarHeight / 2 + 'px'
		return {
			topHeight,
			headerHeight
		}
	},

3.2. Use custom navigation bar page call

Note: height is dynamically bound to navBarHeight, the overall navigation bar height.

           Top is dynamically bound to statusBarHeight, which is the calculated height from the top.

//布局
<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-PLUS
				const 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-WEIXIN
				const wechatObj = this.$system.WechatNavBarHeight()
				this.statusBarHeight = wechatObj.topHeight
				this.navBarHeight = wechatObj.headerHeight + 'px'
				this.headerHeight = wechatObj.headerHeight
				// #endif
			},

That’s it. There were a lot of pitfalls during the implementation process. If you have any questions, leave them in the comment area!