微信小程序中吸底按钮适配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 相关文章推荐
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
vue观察模式浅析
2018/09/25 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
让python json encode datetime类型
2010/12/28 Python
python操作MongoDB基础知识
2013/11/01 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python二维键值数组生成转json的例子
2019/12/06 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
铭立家具面试题
2012/12/06 面试题
override和overload的区别
2016/03/09 面试题
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
中小学生学籍证明
2014/10/25 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
张思德观后感
2015/06/09 职场文书
退货证明模板
2015/06/23 职场文书
python标准库ElementTree处理xml
2022/05/20 Python