需求:
iponeX 以上機型,手機底部有弧度,自己寫的導航欄會被遮住, 需要判斷手機機型,做兼容設置.
解決:
//app.jsApp({ /** * 當小程序初始化完成時,會觸發(fā) onLaunch(全局只觸發(fā)一次) */ onLaunch: function() { var that = this; //獲取手機型號 wx.getSystemInfo({ success(res) { const model = res.model; const modelInclude = ["iPhone X", 'iPhone XR', "iPhone XS", "iPhone XS MAX"]; var flag = false;//是否X以上機型 for (let i = 0; i < modelInclude.length;i ++){ //模糊判斷是否是modelInclude 中的機型,因為真機上測試顯示的model機型信息比較長無法一一精確匹配 if (model.indexOf(modelInclude[i]) != -1){ flag = true } } if (flag) { that.BOTTOM_DISTANCE = 50; } } }) }, /** * 當小程序啟動,或從后臺進入前臺顯示,會觸發(fā) onShow */ onShow: function(options) { }, /** * 當小程序從前臺進入后臺,會觸發(fā) onHide */ onHide: function() { }, /** * 當小程序發(fā)生腳本錯誤,或者 api 調用失敗時,會觸發(fā) onError 并帶上錯誤信息 */ onError: function(msg) { }, BOTTOM_DISTANCE:0,//iponeX底部需要抬高的距離})
頁面js
const app = getApp();Page({ /** * 頁面的初始數(shù)據(jù) */ data: { bottom: app.BOTTOM_DISTANCE//將app實例中的BOTTOM_DISTANCE轉化為頁面的data,即可在xml上使用 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function(options) { },})
然后設置導航底部padding距離即可;
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答