小程序苹果手机底部出现横杠处理

iphone X 手机底部会出现横杠，会影响底部的操作，可以通过判断是否是对应机型，进行不同样式的设置

Taro.getSystemInfoSync() 获取系统信息同步接口。

官网说明：https://taro-docs.jd.com/taro/docs/apis/base/system/getSystemInfoSync

示例代码：

try {const res = Taro.getSystemInfoSync()console.log(res.model) // 设备型号console.log(res.pixelRatio) // 设备像素比console.log(res.windowWidth) // 可使用窗口宽度，单位pxconsole.log(res.windowHeight) // 可使用窗口高度，单位pxconsole.log(res.language) // 微信设置的语言console.log(res.version) // 微信版本号console.log(res.platform) // 客户端平台
} catch (e) {// Do something when catch error
}

示例实操：

// utils/index.ts
import Taro from '@tarojs/taro';const menuButtonInfo = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null;const systemInfo: any = (() => {try {return Taro.getSystemInfoSync();} catch (e) {return undefined;}
})();interface utils {systemEnv: string;isIphoneX: boolean;isIOS: boolean;navHeight: number;windowHeight: number;
}
const utils: utils = {/*** 系统环境*/systemEnv: systemInfo && (systemInfo.environment || 'wx'),/*** 是否是 iphonex*/isIphoneX:!!systemInfo &&(systemInfo.model.includes('iPhone X') ||systemInfo.model.includes('iPhone 11 Pro') ||systemInfo.model.includes('iPhone 12') ||systemInfo.model.includes('iPhone 12 Pro') ||systemInfo.model === 'unknown'),/*** 是否是IOS系统*/isIOS: !!systemInfo && systemInfo.platform.toLowerCase() === 'ios',// /**//  * 是否是生产环境//  */// isProd: appConfig.env === 'production',/*** 自定义导航栏高度*/navHeight: menuButtonInfo?.top ? menuButtonInfo.top + 40 : 26 + 40,/*** 可用窗口高度*/windowHeight: systemInfo?.windowHeight || 0,
};export default utils;

示例使用：

// 引入
import utils from '@/utils';
// 如果是对应机型，就在底部渲染一个间隔，使横杠不影响视觉效果
// 用isIphoneX判断 对应机型
{utils.isIphoneX && <IphoneXHome />}

小程序苹果手机底部出现横杠处理相关推荐

html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
小程序自定义底部菜单栏
问题:小程序的底部菜单栏基本的样式根本不能满足我们的审美要求,所以我们可以通过自己来自定义一套小程序底部栏,可以设置透明背景哟,想要什么样式都可以自己定义,好了,废话不多说,直接上代码! 首先在和pa ...
微信小程序ios版本连接不了服务器,微信小程序苹果手机IOS连接报网络错误解决方案...
微信小程序苹果手机IOS连接报网络错误,但是安卓手机正常. 这个问题主要是因为SSL版本问题,苹果版本的微信支持的是SSL v1.2,所以需要设置一下. windows服务器: 打开powershel ...
解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...
小程序开发：小程序的底部弹窗（半屏弹窗）
小程序的底部弹窗(半屏弹窗) 我这里主要是使用小程序的原生组件WeUI来完成的,需要引入WeUI组件库.这里就不教如何引入库,需要导入WeUI组件库的请看小程序开发:轻松导入WeUI包主要讲解如何 ...
微信小程序iPhoneX 底部虚拟Home键区域适配方案
微信小程序iPhoneX 底部虚拟Home键区域适配方案为什么要适配? 先看下iPhoneX和之前的iPhone的区别,如下图可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会 ...
Taro小程序，底部输入框获取键盘高度动态设置bottom有延迟解决
Taro小程序,底部输入框获取键盘高度动态设置bottom有延迟0.5s左右业务场景: Taro+TaroUI+微信小程序底部固定了一个输入框,当聚焦时输入框自然要上推页面才合理.但不能设置adj ...
微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...

小程序苹果手机底部出现横杠处理

小程序苹果手机底部出现横杠处理相关推荐

最新文章

热门文章