小程序根據(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)文章
element?table?點擊某一行中按鈕加載功能實現(xiàn)
在Element UI中,實現(xiàn)表格(element-table)中的這種功能通常涉及到數(shù)據(jù)處理和狀態(tài)管理,這篇文章主要介紹了element?table?點擊某一行中按鈕加載功能,需要的朋友可以參考下2024-06-06Javascript連接Access數(shù)據(jù)庫完整實例
這篇文章主要介紹了Javascript連接Access數(shù)據(jù)庫的方法,涉及javascript針對access數(shù)據(jù)庫的連接、關(guān)閉及增刪改查等常用操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08關(guān)于微信小程序map組件z-index的層級問題分析
這篇文章主要給大家介紹了關(guān)于微信小程序map組件z-index的層級問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07解決webpack無法通過IP地址訪問localhost的問題
下面小編就為大家分享一篇解決webpack無法通過IP地址訪問localhost的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02js實現(xiàn)控制文件拖拽并獲取拖拽內(nèi)容功能
本片文章主要給大家分享了用JS寫出控制文件拖拽并獲取拖拽內(nèi)容功能實現(xiàn)過程,以及代碼分享,有興趣的一起學(xué)習(xí)下。2018-02-02