困難とさまざまな病気 - iOS アプレットのステータス バーの適応

現在、さまざまなフロントエンド UI フレームワークが iOS に適応され、uview をはじめ uniapp 関連のコンポーネントも適応されていますが、要件の中には、フレームワークが要件を満たせない場合があり、自動的に設定および適応する必要があることは避けられません。

 1: ミニ プログラム ヘッダーのステータス バーを調整します: (これは uniapp 関連の調整です)

ミニプログラムがヘッダーをカスタマイズする必要がある場合、ステータスバーとナビゲーションバーの高さを知る必要がありますが、ステータスバーと高さはiOSモデルによって異なるため、自動的に取得する必要があります。 

補足:まず、pages.jsonのステータスバーをカスタマイズしたいページのヘッダーを「navigationStyle」:「custom」で非表示にする必要があります。

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

               }

ステータスバーの高さを格納するためにデータ内で globalData を宣言します

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

 ライフサイクルで価値を得る

	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

 該当する高さが取得され、ページに表示されます。

 ページ コード (クラス名を追加する必要はありません) は、style 属性を直接使用して、関連する属性を調整します。

	<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>

不備がある場合は、元の投稿者に @ を送信して変更を加えることができます。