快捷導(dǎo)航

小程序根據(jù)手機(jī)機(jī)型設(shè)置自定義底部導(dǎo)航距離

更新時(shí)間：2019年06月04日 08:35:57 作者：zhang_haoqi

這篇文章主要為大家詳細(xì)介紹了小程序根據(jù)手機(jī)機(jī)型設(shè)置自定義底部導(dǎo)航距離，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

需求:

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Webstorm開(kāi)發(fā)uni-app項(xiàng)目詳細(xì)圖文教程
這篇文章主要介紹了使用WebStorm和UniappTool創(chuàng)建和運(yùn)行uni-app項(xiàng)目的相關(guān)資料,包括配置微信開(kāi)發(fā)者工具和運(yùn)行項(xiàng)目,同時(shí)提到了創(chuàng)建新頁(yè)面和使用uniapptool存在的弊端,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-11-11
微信小程序如何獲知用戶運(yùn)行小程序的場(chǎng)景教程
這篇文章主要給大家介紹了在微信小程序中如何獲知用戶運(yùn)行小程序場(chǎng)景的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)跟著小編一起來(lái)看看吧。
2017-05-05
JavaScript截取、切割字符串的技巧
這篇文章主要介紹了JavaScript截取、切割字符串的技巧,文中給大家提到了substr 和 substring方法的區(qū)別，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2016-01-01
js實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法
這篇文章主要為大家詳細(xì)介紹了微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-02-02
js 自定義個(gè)性下拉選擇框示例
下拉選擇框想必大家并不陌生，一邊情況下都是使用默認(rèn)的，為了打破傳統(tǒng)，下面與大家分享下使用js自定義下拉選擇框示例代碼,感興趣的朋友可以參考下
2013-08-08
紅米手機(jī)搶購(gòu)的js代碼
這篇文章主要介紹了紅米手機(jī)搶購(gòu)時(shí)返回的js代碼，制作紅米搶購(gòu)軟件時(shí)可以用到，,需要的朋友可以參考下
2014-03-03
利用javascript實(shí)現(xiàn)web頁(yè)面中指定區(qū)域打印
將需要打印的課程表的table放入div標(biāo)簽中，然后指定出需要打印的區(qū)域，最后調(diào)用window.print打印指定內(nèi)容
2013-10-10
奇偶行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類
奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過(guò)高亮顯示,一個(gè)經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒(méi)有一個(gè)封裝成類直接用的.想象自己當(dāng)初谷歌這個(gè)類時(shí),還真沒(méi)少折騰時(shí)間.
2010-07-07
JS求解兩數(shù)之和算法詳解
這篇文章主要介紹了JS求解兩數(shù)之和算法,結(jié)合實(shí)例形式詳細(xì)分析了JS求解兩數(shù)之和算法相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04