小程序根據(jù)手機(jī)機(jī)型設(shè)置自定義底部導(dǎo)航距離
更新時間：2019年06月04日 08:35:57 作者：zhang_haoqi
這篇文章主要為大家詳細(xì)介紹了小程序根據(jù)手機(jī)機(jī)型設(shè)置自定義底部導(dǎo)航距離，具有一定的參考價值，感興趣的小伙伴們可以參考一下
需求:
iponeX 以上機(jī)型,手機(jī)底部有弧度,自己寫的導(dǎo)航欄會被遮住, 需要判斷手機(jī)機(jī)型,做兼容設(shè)置.
解決:
//app.js
App({
/**
* 當(dāng)小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
*/
onLaunch: function() {
var that = this;
//獲取手機(jī)型號
wx.getSystemInfo({
success(res) {
const model = res.model;
const modelInclude = ["iPhone X", 'iPhone XR', "iPhone XS", "iPhone XS MAX"];
var flag = false;//是否X以上機(jī)型
for (let i = 0; i < modelInclude.length;i ++){
//模糊判斷是否是modelInclude 中的機(jī)型,因為真機(jī)上測試顯示的model機(jī)型信息比較長無法一一精確匹配
if (model.indexOf(modelInclude[i]) != -1){
flag = true
}
}
if (flag) {
that.BOTTOM_DISTANCE = 50;
}
}
})
},
/**
* 當(dāng)小程序啟動，或從后臺進(jìn)入前臺顯示，會觸發(fā) onShow
*/
onShow: function(options) {
},
/**
* 當(dāng)小程序從前臺進(jìn)入后臺，會觸發(fā) onHide
*/
onHide: function() {
},
/**
* 當(dāng)小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時，會觸發(fā) onError 并帶上錯誤信息
*/
onError: function(msg) {
},
BOTTOM_DISTANCE:0,//iponeX底部需要抬高的距離
})
頁面js
const app = getApp();
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
bottom: app.BOTTOM_DISTANCE//將app實例中的BOTTOM_DISTANCE轉(zhuǎn)化為頁面的data,即可在xml上使用
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
},
})
然后設(shè)置導(dǎo)航底部padding距離即可;
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Webstorm開發(fā)uni-app項目詳細(xì)圖文教程
這篇文章主要介紹了使用WebStorm和UniappTool創(chuàng)建和運(yùn)行uni-app項目的相關(guān)資料,包括配置微信開發(fā)者工具和運(yùn)行項目,同時提到了創(chuàng)建新頁面和使用uniapptool存在的弊端,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
這篇文章主要給大家介紹了在微信小程序中如何獲知用戶運(yùn)行小程序場景的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來跟著小編一起來看看吧。2017-05-05
這篇文章主要介紹了JavaScript截取、切割字符串的技巧,文中給大家提到了substr 和 substring方法的區(qū)別，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序三級聯(lián)動選擇器使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
下拉選擇框想必大家并不陌生，一邊情況下都是使用默認(rèn)的，為了打破傳統(tǒng)，下面與大家分享下使用js自定義下拉選擇框示例代碼,感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了紅米手機(jī)搶購時返回的js代碼，制作紅米搶購軟件時可以用到，,需要的朋友可以參考下2014-03-03
利用javascript實現(xiàn)web頁面中指定區(qū)域打印
將需要打印的課程表的table放入div標(biāo)簽中，然后指定出需要打印的區(qū)域，最后調(diào)用window.print打印指定內(nèi)容2013-10-10
奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過高亮顯示,一個經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒有一個封裝成類直接用的.想象自己當(dāng)初谷歌這個類時,還真沒少折騰時間.2010-07-07
這篇文章主要介紹了JS求解兩數(shù)之和算法,結(jié)合實例形式詳細(xì)分析了JS求解兩數(shù)之和算法相關(guān)原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-04-04