微信小程序吸底区域适配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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
js 图片等比例缩放代码
May 13 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 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
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
php查询内存信息操作示例
2019/05/09 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
vue实现扫码功能
2020/01/17 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
详解python中的装饰器
2018/07/10 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
保安自我鉴定范文
2013/12/08 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
js之ajax文件上传
2021/05/13 Javascript
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android