Difficulties and miscellaneous diseases - Adapting the status bar of iOS applet

Nowadays, various front-end UI frameworks have been adapted to iOS, and uniapp-related components have also been adapted, as has uview. Among requirements, it is inevitable that the framework cannot meet the requirements and needs to be automatically configured and adapted.

 1: Adapt the mini program header status bar: (here is the uniapp related adaptation)

When the mini program needs to customize the header, it needs to know the height of the status bar and navigation bar. Since the status bar and height are different for iOS models, they need to be obtained automatically. 

Supplement: You need to first hide the header of the page you want to customize the status bar in pages.json with "navigationStyle": "custom"

"path": "study/lrkb",
      "style": {
              "navigationBarTitleText": "蜡染课包",
               "navigationStyle": "custom"

               }

Declare globalData in data to store the status bar height

globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},

 Get value in life cycle

	this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			// #ifdef MP-WEIXIN
			const custom = wx.getMenuButtonBoundingClientRect()
			this.top = custom.top // 胶囊距离顶部距离
			// console.log(custom)
			//导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
			// console.log("导航栏高度："+this.globalData.navigationBarHeight)
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

 The relevant height is obtained and displayed on the page.

 The page code (you don’t need to add a class name) directly uses the style attribute to adapt related attributes.

	<view class="status_bar" :style="'height:' +globalData.statusBarHeight + 'px;overflow:hidden' ">
				<!-- 这里是状态栏 -->
			</view>
<view class="navbar" ref="navbar" :style="'height:'+globalData.navHeight+ 'rpx;position: relative;z-index:1;overflow:hidden'"></view>

If there are any deficiencies, you can @the original poster to make changes.