小程序根據(jù)手機(jī)機(jī)型設(shè)置自定義底部導(dǎo)航距離
需求:
iponeX 以上機(jī)型,手機(jī)底部有弧度,自己寫(xiě)的導(dǎo)航欄會(huì)被遮住, 需要判斷手機(jī)機(jī)型,做兼容設(shè)置.
解決:
//app.js
App({
/**
* 當(dāng)小程序初始化完成時(shí),會(huì)觸發(fā) onLaunch(全局只觸發(fā)一次)
*/
onLaunch: function() {
var that = this;
//獲取手機(jī)型號(hào)
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ī)型,因?yàn)檎鏅C(jī)上測(cè)試顯示的model機(jī)型信息比較長(zhǎng)無(wú)法一一精確匹配
if (model.indexOf(modelInclude[i]) != -1){
flag = true
}
}
if (flag) {
that.BOTTOM_DISTANCE = 50;
}
}
})
},
/**
* 當(dāng)小程序啟動(dòng),或從后臺(tái)進(jìn)入前臺(tái)顯示,會(huì)觸發(fā) onShow
*/
onShow: function(options) {
},
/**
* 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái),會(huì)觸發(fā) onHide
*/
onHide: function() {
},
/**
* 當(dāng)小程序發(fā)生腳本錯(cuò)誤,或者 api 調(diào)用失敗時(shí),會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
*/
onError: function(msg) {
},
BOTTOM_DISTANCE:0,//iponeX底部需要抬高的距離
})
頁(yè)面js
const app = getApp();
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
bottom: app.BOTTOM_DISTANCE//將app實(shí)例中的BOTTOM_DISTANCE轉(zhuǎn)化為頁(yè)面的data,即可在xml上使用
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function(options) {
},
})
然后設(shè)置導(dǎo)航底部padding距離即可;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 (三)tabBar底部導(dǎo)航詳細(xì)介紹
- 微信小程序教程系列之設(shè)置標(biāo)題欄和導(dǎo)航欄(7)
- 微信小程序 配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法
- 微信小程序 開(kāi)發(fā)之頂部導(dǎo)航欄實(shí)例代碼
- 微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼
- 詳解微信小程序設(shè)置底部導(dǎo)航欄目方法
- 微信小程序自定義導(dǎo)航隱藏和顯示功能
- 微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄(選項(xiàng)卡)(1)
- 微信小程序?qū)崿F(xiàn)滴滴導(dǎo)航tab切換效果
相關(guān)文章
IE本地存儲(chǔ)userdata的一個(gè)bug說(shuō)明
再一次項(xiàng)目上用到ie的userdata,考慮當(dāng)用戶不使用flash插件用于存儲(chǔ)一些聊天記錄2010-07-07
element?table?點(diǎn)擊某一行中按鈕加載功能實(shí)現(xiàn)
在Element UI中,實(shí)現(xiàn)表格(element-table)中的這種功能通常涉及到數(shù)據(jù)處理和狀態(tài)管理,這篇文章主要介紹了element?table?點(diǎn)擊某一行中按鈕加載功能,需要的朋友可以參考下2024-06-06
Javascript連接Access數(shù)據(jù)庫(kù)完整實(shí)例
這篇文章主要介紹了Javascript連接Access數(shù)據(jù)庫(kù)的方法,涉及javascript針對(duì)access數(shù)據(jù)庫(kù)的連接、關(guān)閉及增刪改查等常用操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
js實(shí)現(xiàn)HashTable(哈希表)的實(shí)例分析
本文詳細(xì)介紹javascript哈希表的實(shí)例分析及用法。下面就跟小編一起來(lái)學(xué)習(xí)下吧2016-11-11
關(guān)于微信小程序map組件z-index的層級(jí)問(wèn)題分析
這篇文章主要給大家介紹了關(guān)于微信小程序map組件z-index的層級(jí)問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
解決webpack無(wú)法通過(guò)IP地址訪問(wèn)localhost的問(wèn)題
下面小編就為大家分享一篇解決webpack無(wú)法通過(guò)IP地址訪問(wèn)localhost的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js實(shí)現(xiàn)控制文件拖拽并獲取拖拽內(nèi)容功能
本片文章主要給大家分享了用JS寫(xiě)出控制文件拖拽并獲取拖拽內(nèi)容功能實(shí)現(xiàn)過(guò)程,以及代碼分享,有興趣的一起學(xué)習(xí)下。2018-02-02

