微信小程序中吸底按钮适配iPhone X方案


Posted in Javascript onNovember 29, 2017

随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所料,豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方,主要是商品详情页和购物车的吸底按钮栏,会与 Home Indicator 横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图:

微信小程序中吸底按钮适配iPhone X方案 

截图来自网络,侵删

是bug就得修,是体验问题就得优化,于是立马搞了一台iPhone X开始研究。

网页端的适配还好,有 viewport meta 标签以及下面的方案进行处理。具体可参看这里

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

但比较尴尬了,从四个角被裁掉的表现上可以推测小程序里的 viewport-fit 默认为 cover (根据表现猜测),但是没有接口去更改,所以网页端通过 viewport-fix=cover 结合 constant(safe-area-inset-bottom); 的适配方案不适合小程序。目前也没有看到小程序有对iPhone X等异形屏有特殊的接口或字段。小程序本身的底部tab栏对iPhone X的适配也只是简单的加了一个白色底栏,提高了原有tab栏的位置,为什么这么说呢?因为这一点可以从我们购物车页面看出,购物车页吸底操作并非通过 position:fixed;bottom:0; 实现的,而是根据 windowHeight-自身高度 计算 top 值,从而模拟的吸底,在小程序新版本适配iPhone X后,导致购物车底部按钮被盖住了一半,由此得出上面的结论。

言归正传,既然没有特殊的方案获取该值,我们只能通过 wx.getSystemInfo 接口取获取设备信息,该接口使用方法如下:

wx.getSystemInfo({
 success: function(res) {
  console.log(res.model)
  console.log(res.pixelRatio)
  console.log(res.windowWidth)
  console.log(res.windowHeight)
  console.log(res.language)
  console.log(res.version)
  console.log(res.platform)
 }
})

其中 model 便是设备的型号等信息,如果 model 中包含 iPhone X ,便可认为该设备为iPhone X,我们在入口文件 app.js 中去进行检测,然在全局增加一个 isIpx 字段,将结果赋予 isIpx 。

在子页面中可以读取该值,举个商品详情页的栗子:

<!-- goods.wxml -->
<view class="button-group {{isIpx?'fix-iphonex-button':''}}">这是一个吸底按钮区域</view>
// goods.js
let app = getApp();
Page({
  data: {
    isIpx: app.globalData.isIpx?true:false
  }
})
/* app.wxss */
.fix-iphonex-button {
  bottom:68rpx!important;
}
.fix-iphonex-button::after {
  content: ' ';
  position: fixed;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
}

于是,一个简单的适配iPhone X底部圆角的方案就完成了。

至于为什么采用 68rpx ,因为iPhone X和iPhone 6的屏幕宽度都是375px,小程序中 750rpx = 375px = 750物理像素 ,结合下面两图能解释原因:

微信小程序中吸底按钮适配iPhone X方案 

截图来自网络,侵删

微信小程序中吸底按钮适配iPhone X方案 

截图来自网络,侵删

总结

以上所述是小编给大家介绍的微信小程序中吸底按钮适配iPhone X方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
jquery自定义表格样式
Nov 23 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 #jQuery
写给小白看的JavaScript异步
Nov 29 #Javascript
3种vue组件的书写形式
Nov 29 #Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 #Javascript
纯js实现隔行变色效果
Nov 29 #Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 #Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 #Javascript
You might like
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php实现购物车功能(上)
2020/07/23 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
js选择器全面解析
2016/06/27 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
Python爬取某平台短视频的方法
2021/02/08 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
函授大学生自我鉴定
2014/02/05 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
故宫英文导游词
2015/01/31 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python