uniapp或微信小程序底栏固定定位在小黑条下全面屏适配解决

红烧Jay

于 2023-06-10 12:32:57 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签：微信小程序 uni-app 小程序

本文链接：https://blog.youkuaiyun.com/m0_65466908/article/details/131140578

文章介绍了如何在uniapp和微信小程序中利用uni.getSystemInfo和wx.getSystemInfoAPI获取安全区域信息，特别是safeAreaInsets和safeArea参数。通过封装getSafeAreaInsets函数，可以在页面加载时动态设置底部栏的padding，以适应全面屏的安全区域。作者提供了一个实例，展示如何调整底部栏的样式来避免被底部黑线遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用uni或者微信提供的api uniapp开发者文档

微信小程序微信开发者文档

uni使用safeAreaInsets参数

微信使用safeArea参数

/**
 获取到屏幕的安全区域
 全面屏的值为to顶部状态栏和bottom底部黑线安全区
 */
export function getSafeAreaInsets() {
	let safeAreaInsets = 0
	uni.getSystemInfo({
		success: function (res) {
			console.log(res.model);
			console.log(res.pixelRatio);
			console.log(res.windowWidth);
			console.log(res.windowHeight);
			console.log(res.language);
			console.log(res.version);
			console.log(res.platform);
			console.log(res.safeAreaInsets)
			console.log(res)
			safeAreaInsets = res.safeAreaInsets

		}
	})
	return safeAreaInsets
}

封装一个工具，哪个页面用哪里就调用，微信小程序把uni. 换成wx. 就行

下面是我的底栏html代码,绑定一个动态的style属性

data里声明变量padding:'padding-bottom:0'

下面是页面加载时调用,我这里直接使用他返回的bottom值感觉有点大,我自己减去了10,大家可以自己调整

onLoad: function (option) {
		let safeBottom = getSafeAreaInsets().bottom
		if(safeBottom > 0){
			this.padding = 'padding-bottom:'+(safeBottom-10)*2+'rpx'
		}
		console.log(this.padding)
	},

然后就搞定了