小程序根據(jù)手機機型設置自定義底部導航距離
更新時間：2019年06月04日 08:35:57 作者：zhang_haoqi
這篇文章主要為大家詳細介紹了小程序根據(jù)手機機型設置自定義底部導航距離，具有一定的參考價值，感興趣的小伙伴們可以參考一下
需求:
iponeX 以上機型,手機底部有弧度,自己寫的導航欄會被遮住, 需要判斷手機機型,做兼容設置.
解決:
//app.js
App({
/**
* 當小程序初始化完成時，會觸發(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距離即可;
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了js中==與===的相同點與不同點。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
再一次項目上用到ie的userdata，考慮當用戶不使用flash插件用于存儲一些聊天記錄2010-07-07
element?table?點擊某一行中按鈕加載功能實現(xiàn)
在Element UI中,實現(xiàn)表格（element-table）中的這種功能通常涉及到數(shù)據(jù)處理和狀態(tài)管理,這篇文章主要介紹了element?table?點擊某一行中按鈕加載功能,需要的朋友可以參考下2024-06-06
Javascript連接Access數(shù)據(jù)庫完整實例
這篇文章主要介紹了Javascript連接Access數(shù)據(jù)庫的方法,涉及javascript針對access數(shù)據(jù)庫的連接、關閉及增刪改查等常用操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
本文詳細介紹javascript哈希表的實例分析及用法。下面就跟小編一起來學習下吧2016-11-11
這篇文章主要給大家介紹了關于微信小程序map組件z-index的層級問題的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07
解決webpack無法通過IP地址訪問localhost的問題
下面小編就為大家分享一篇解決webpack無法通過IP地址訪問localhost的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
今天小編就為大家分享一篇Layui點擊圖片彈框預覽的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本片文章主要給大家分享了用JS寫出控制文件拖拽并獲取拖拽內容功能實現(xiàn)過程，以及代碼分享，有興趣的一起學習下。2018-02-02
這篇文章主要為大家詳細介紹了js仿新浪微博消息發(fā)布功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02