微信小程序適配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", }) } }
如果您的問題還未解決可以聯系站長付費協助。

有問題可以加入技術QQ群一起交流學習
本站vip會員 請加入無憂模板網 VIP群(50604020) PS:加入時備注用戶名或昵稱
普通注冊會員或訪客 請加入無憂模板網 技術交流群(50604130)
客服微信號:15898888535
聲明:本站所有文章資源內容,如無特殊說明或標注,均為采集網絡資源。如若內容侵犯了原著者的合法權益,可聯系站長刪除。