微信小程序吸底区域适配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 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
加速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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP实现微信提现功能
2018/09/30 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
JQuery验证工具类搜集整理
2013/01/16 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
中学生自我评价范文
2014/02/08 职场文书
黄金酒广告词
2014/03/21 职场文书
公司晚会主持词
2014/03/22 职场文书
法律顾问服务方案
2014/05/15 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
离婚协议书样本
2015/01/26 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
教学督导岗位职责
2015/04/10 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
利用python做数据拟合详情
2021/11/17 Python
SQL Server使用导出向导功能
2022/04/08 SQL Server
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL