位置: 编程技术 - 正文

微信小程序中吸底按钮适配iPhone X方案(微信小程序吸血鬼 豹女)

编辑:rootadmin

推荐整理分享微信小程序中吸底按钮适配iPhone X方案(微信小程序吸血鬼 豹女),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序吸油记怎么挖矿,微信小程序吸引人的抽奖文案,微信小程序吸油记怎么挖矿,微信小程序吸油记兑换码,微信小程序吸顶失效了怎么办,微信小程序吸顶失效了怎么办,微信小程序吸油记怎么挖矿,微信小程序吸油记兑换码,内容如对您有帮助,希望把文章链接给更多的朋友!

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

截图来自网络,侵删

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

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

但比较尴尬了,从四个角被裁掉的表现上可以推测小程序里的 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 接口取获取设备信息,该接口使用方法如下:

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

微信小程序中吸底按钮适配iPhone X方案(微信小程序吸血鬼 豹女)

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

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

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

截图来自网络,侵删

截图来自网络,侵删

总结

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

html中通过JS获取JSON数据并加载的方法 在写内容逻辑重复性的页面时,用json数据可以显著提高编程效率,并且便于后期的数据维护。因此,在视频专题页面,需要展示多列视频数据,我选择

微信小程序实现添加手机联系人功能示例 本文实例讲述了微信小程序实现添加手机联系人功能。分享给大家供大家参考,具体如下:1、效果展示2、关键代码1)WXML文件viewbindlongtap="phoneNumTap"{{pho

完美解决手机浏览器顶部下拉出现网页源或刷新的问题 问题如下图所示:一般处理此类问题都会有一个属性:event.preventDefault(),但是如果直接使用会导致页面的内部滚动也失效导致不能滚动,我所处理的方

标签: 微信小程序吸血鬼 豹女

本文链接地址:https://www.jiuchutong.com/biancheng/373295.html 转载请保留说明!

上一篇:纯js实现隔行变色效果(js实现隔行变色)

下一篇:html中通过JS获取JSON数据并加载的方法(js获取html自定义属性)

  • 纳税怎么理解
  • 进口货物的会计科目
  • 金税四期上线了吗什么时候上线
  • 零星物流运费无法支付
  • 销售增长率在报表上怎么看出来
  • 对赌协议赢了怎么样
  • 企业间借款增值税税率
  • 电费做其他业务收入的账务处理怎么做?
  • 职工在病假领取失业金
  • 个人转让住宅要交哪些税
  • 所得税汇算清缴退税会计分录怎么做
  • 商务旅行人身意外伤害险在税前扣除范围内吗?
  • 取得土地无形资产的条件
  • 上传失败显示网络不佳
  • 销售商品收到商业汇票属于什么科目
  • 支付罚款的支出计入什么科目
  • 公司租土地建厂房应该怎么做账呢?
  • 评估资产没有发票和流水怎么办
  • 地毯属于什么类别
  • 暂估入库有时间限制吗
  • led电子屏税收编码
  • 其他应收款贷方重分类到哪个科目
  • 软件 摊销
  • 要求快速启动
  • windows无法自动检测网络代理设置该怎么办
  • qbdagent2002.exe - qbdagent2002是什么进程 有什么用
  • PHP:curl_copy_handle()的用法_cURL函数
  • 待抵扣进项税额贷方表示什么
  • 苹果最小的充电器是哪一款
  • 安克雷奇的秃鹰怎么打
  • 普利特维采湖群国家公园天气
  • vue生命周期图解
  • AIGC之GPT-4:GPT-4的简介(核心原理/意义/亮点/技术点/缺点/使用建议)、使用方法、案例应用(计算能力/代码能力/看图能力等)之详细攻略
  • mkv视频制作
  • 残疾人加计扣除工资按应发还是实发
  • wordpress技巧
  • 增值税小规模纳税人减免增值税政策
  • 进项税抵扣的分录怎么做
  • 对公贷款利息如何入账
  • 缴纳社保公积金的会计分录
  • 退休人员基本养老金计发表
  • 公司租赁个人车辆租金多少合适
  • 长期借款涉及哪些账户
  • 复利现值和复利终值互为逆运算对吗
  • 外资企业所得税优惠政策
  • 实缴出资未注明投资款
  • 汇算清缴亏损弥补不能自动带出该怎么办
  • 超市代销如何分成
  • 台账和明细账有什么区别
  • 加权净资产收益率越高越好吗
  • 跨年材料票可以入账吗
  • 主营业务收入少计跨年调整
  • 债务重组的方式主要包括哪些
  • windows预体验版本遇到问题
  • win10预览版21390
  • 注册表regsz是什么意思
  • windows预览版计划
  • freebsd操作命令
  • winole.exe - winole是什么进程
  • 苹果Mac系统怎么装
  • linux指令系统
  • linux中查看文件
  • WIN10系统安装EXCEL打开会报警
  • linux系统如何安装应用
  • win8系统隐藏文件怎么查看
  • python双循环题
  • python2.7安装numpy
  • python内置函数open()的参数用来指定打开文本文件
  • Node.js中的construct构造函数
  • [置顶]公主大人接下来是拷问时间31
  • python中的命名规范
  • jquery validator
  • JAVAscript字符串类型单引号和双引号意一样吗
  • HorizontalListView
  • 王军调研地税局的职务
  • 小规模一季度多少免增值税
  • 志愿者补贴如何领取
  • 即征即退进项税额分摊方法
  • 智能财税代理实务实训过程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设