微信小程序适配iphoneX
Posted 行走的小白
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序适配iphoneX相关的知识,希望对你有一定的参考价值。
在小程序开发中,涉及到适配iphonex的情况主要就是在页面的最下出现button的情况,对于这个的解决思路就是:
1.获取设备型号:
// 在app.js中判断是否是哪种设备 globalData: { isIphoneX: false, userInfo: null }, onShow:function(){ let that = this; wx.getSystemInfo({ success: res=>{ // console.log(\'手机信息res\'+res.model) let modelmes = res.model; if (modelmes.search(\'iPhone X\') != -1) { that.globalData.isIphoneX = true } } }) },
2.根据不同的设备,设置不同的css样式,另外在html布局的时候button放进别的容器标签中例如:
xx.wxml
<view class=\'contentView\' style=\'padding-bottom:{{btuBottom}}\'> <button class=\'but\'>Button </button> </view>
xx.js
data: { btuBottom:""; }, //在这里只需要判断是不是iphonex,然后设置下padding-bottom:即可 onLoad: function (options) { let isPhone = app.globalData.isIphoneX; if(isPhone){ this.setData({ btuBottom:"68rpx", }) } }
转载:https://www.cnblogs.com/mica/p/11162384.html
以上是关于微信小程序适配iphoneX的主要内容,如果未能解决你的问题,请参考以下文章