需求:

iponeX 以上機型,手機底部有弧度,自己寫的導航欄會被遮住, 需要判斷手機機型,做兼容設置.

解決:

//app.js App({/*** 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）*/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;}}})},/*** 當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow*/onShow: function(options) {},/*** 當小程序從前臺進入后臺，會觸發 onHide*/onHide: function() {},/*** 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息*/onError: function(msg) {},BOTTOM_DISTANCE:0,//iponeX底部需要抬高的距離 })

頁面js

const app = getApp();Page({/*** 頁面的初始數據*/data: {bottom: app.BOTTOM_DISTANCE//將app實例中的BOTTOM_DISTANCE轉化為頁面的data,即可在xml上使用},/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {}, })

然后設置導航底部padding距離即可;

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的小程序根据手机机型设置自定义底部导航距离的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。