微信小程序吸底区域适配iPhoneX的实现


Posted in Javascript onApril 09, 2020

微信小程序适配iPhone X主要针对fix定位到底部的区域,比如详情页或购物车底部的按钮栏,会与iPhone X的Home Indicator横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图:

微信小程序吸底区域适配iPhoneX的实现

旧方法

1. 获取设备信息

/**
 * 获取设备信息
 * @returns {Promise<any>}
 */
export function wechatGetSystemInfo () {
 return new Promise((resolve, reject) => {
  wx.getSystemInfo({
   success: (res) => {
    resolve(res)
   }, fail: (err) => {
    reject(err)
   }
  })
 })
}

2. 设置css样式

.view-fix-iphonex {
 bottom: ~'68rpx' !important;
}

.view-fix-iphonex::after {
 content: ' ';
 position: fixed;
 bottom: 0 !important;
 height: ~'68rpx' !important;
 width: 100%;
 background: #fff;
}

3. 设置一个标识符isIpx存在vuex中,在小程序初始化完成时判断

App.vue 中处理

<script>
 import wx from 'wx'
 import { mapGetters, mapActions } from 'vuex'
 import { wechatGetSystemInfo } from './utils/weappUtils'

 export default {
  onLaunch () {
   this.isIphoneX()
  },
  computed: {
   ...mapGetters(['isIpx'])
  },
  methods: {
   //判断设备是否是iphoneX
   isIphoneX() {
    wechatGetSystemInfo().then(res => {
     const deviceModel = 'iPhone X'
     let isIpx = false
     if (res.model.indexOf(deviceModel) > -1) {
      isIpx = true
     }
     if (this.isIpx !== isIpx) {
      this.setIsIpx(isIpx)
     }
    }).catch(err => {})
   },
   ...mapActions(['setIsIpx'])
  }
 }
</script>

4. 在需要适配的页面中设置

如在 demo.vue 中处理

<template>
   <div class="fix-view"
     :class="isIpx?'view-fix-iphonex':''"
  >
   吸附在底部的区域
  </div>
</template>


<script>
 import wx from 'wx'
 import {mapGetters} from 'vuex'

 export default {
  computed: {
   ...mapGetters(['isIpx'])
  },
 }
</script>

<style lang="less">
  .fix-view {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   height: ~'100rpx';
   line-height: ~'100rpx';
   box-sizing: border-box;
   text-align: right;
   display: flex;
   justify-content: end;
   background: #fff;
  }
</style>

新方法

env() 和 constant()

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离

这里我们只需要关注 safe-area-inset-bottom 这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。

注意:当 viewport-fit=contain 时 env() 是不起作用的,必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器,浏览器将会忽略它。

在这之前,笔者使用的是 constant(),后来,官方文档加了这么一段注释(坑):

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

这就意味着,之前使用的 constant() 在 iOS11.2 之后就不能使用的,但我们还是需要做向后兼容,像这样:

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意:env() 跟 constant() 需要同时存在,而且顺序不能换。

更详细说明,参考文档:Designing Websites for iPhone X

如何适配

了解了以上所说的几个知识点,接下来我们适配的思路就很清晰了。

第一步:设置网页在可视窗口的布局方式

新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口:

<meta name="viewport" content="width=device-width, viewport-fit=cover">

前面也有提到过,只有设置了 viewport-fit=cover,才能使用 env()。

第二步:页面主体内容限定在安全区域内

这一步根据实际页面场景选择,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况。

body { 
	padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步:fixed 元素的适配类型一:fixed 完全吸底元素(bottom = 0),比如下图这两种情况:

微信小程序吸底区域适配iPhoneX的实现

可以通过加内边距 padding 扩展高度:

{ 
	padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

或者通过计算函数 calc 覆盖原来高度:

{ 
	height: calc(60px(假设值) + constant(safe-area-inset-bottom));
  height: calc(60px(假设值) + env(safe-area-inset-bottom));
}

注意,这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。

还有一种方案就是,可以通过新增一个新的元素(空的颜色块,主要用于小黑条高度的占位),然后吸底元素可以不改变高度只需要调整位置,像这样:

{ 
	margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

空的颜色块:

{ 
	position: fixed;
  bottom: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
  background-color: #fff;
}

类型二:fixed 非完全吸底元素(bottom ≠ 0),比如 “返回顶部”、“侧边广告” 等

像这种只是位置需要对应向上调整,可以仅通过外边距 margin 来处理:

{ 
	margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

或者,你也可以通过计算函数 calc 覆盖原来 bottom 值:

{ 
	bottom: calc(50px(假设值) + constant(safe-area-inset-bottom));
  bottom: calc(50px(假设值) + env(safe-area-inset-bottom));
}

你也可以使用 @supports 隔离兼容样式

写到这里,我们常见的两种类型的 fixed 元素适配方案已经了解了吧。如果我们只希望 iPhoneX 才需要新增适配样式,我们可以配合 @supports 来隔离兼容样式,当然这个处理对页面展示实际不会有任何影响:

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 
	div {
  	margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom); 
  }
}

到此这篇关于微信小程序吸底区域适配iPhoneX的实现的文章就介绍到这了,更多相关小程序吸底区域适配iPhoneX内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
加速vue组件渲染之性能优化
Apr 09 #Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 #Javascript
微信小程序纯文本实现@功能
Apr 08 #Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 #Javascript
You might like
用Flash图形化数据(一)
2006/10/09 PHP
NOT NULL 和NULL
2007/01/15 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
webpack实用小功能介绍
2018/01/02 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
详解python读取image
2019/04/03 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
房屋出租协议书
2014/04/10 职场文书
稽核岗位职责
2015/02/10 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang