疑难杂症之——适配ios端小程序状态栏

现在的前端各种ui框架都做了ios 的适配，uniapp 相关的组件也是做了相关适配，uview也是，在需求当中，避免不了框架不能满足需求，需要自动去配置适配。

1:适配小程序头部状态栏：(这里是uniapp 相关适配)

当小程序需要自定义头部，需要知道状态栏和导航栏高度，由于ios机型，状态栏和高度都不一样，所以需要自动获取

补充：需要先在pages.json中，将你要自定义状态栏页面的头部隐藏掉"navigationStyle": "custom"

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

               }

在data中声明 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>

有不足的地方，可以@楼主进行更改

疑难杂症之——适配ios端小程序状态栏

猜你喜欢