问题如下:

适配之前iPhone5界面如下: 在这里插入图片描述 iPhone12界面如下: 在这里插入图片描述

为了适配所有的手机机型,需要获取到底部小黑条的高度,给固定在底部的view设置padding-bottom,增加高度;(有些手机默认是没有底部这个区域的,没有的话padding-bottom就设置为0)

解决方法如下:

在app.vue中定义如下:

 globalData: {  
	                bottomLift: ''  
	            },
		onLaunch: function() {
			  //获取当前设备信息
			    wx.getSystemInfo({
			      success: res => {
			        this.globalData.bottomLift = res.screenHeight - res.safeArea.bottom;
			
			      },
			      fail(err) {
			        console.log(err);
			      }
			    })
		},
 }

在对应页面js中:

var app = getApp()
	data() {
			return {
				 bottomLift: app.globalData.bottomLift
				 };
}

样式:

<view class="cart-box" 
:style="{ paddingBottom: bottomLift + 'px' }">
</view>

该文章版权属于三月十二_
摘录自:https://blog.csdn.net/weixin_41847305/article/details/126242441

微信小程序适配iphoneX,XR,12等机型的底部安全区域的更多相关文章

  1. 微信小程序屏幕适配不同的iPhone

    微信小程序屏幕适配不同的iPhone ...

  2. 安装chrome插件报\"程序包无效

    安装chrome插件报\"程序包无效 ...

  3. 【日常踩坑】修复 chrome 打不开微信或者部分第三方应用内链接

    【日常踩坑】修复 chrome 打不开微信或者部分第三方应用内链接 ...

  4. 前端工具 - 开发者工具(F12)

    前端工具 - 开发者工具(F12) ...

  5. 浏览器F12(开发者调试工具) 功能介绍

    浏览器F12(开发者调试工具) 功能介绍 ...

  6. 如何使用浏览器的F12开发者工具调试页面?

    如何使用浏览器的F12开发者工具调试页面? ...

  7. F12开发人员工具如何使用、抓包、调试代码

    F12开发人员工具如何使用、抓包、调试代码 ...

  8. 在手机端浏览器模拟F12(实用小工具)

    在手机端浏览器模拟F12(实用小工具) ...

  9. 手机版浏览器f12_小科普 | 如何用浏览器的F12装逼?

    手机版浏览器f12_小科普 | 如何用浏览器的F12装逼? ...

  10. 自带光环(vConsole)!移动端F12调试工具

    自带光环(vConsole)!移动端F12调试工具 ...