小程序根据手机机型设置自定义底部导航距离
生活随笔
收集整理的這篇文章主要介紹了
小程序根据手机机型设置自定义底部导航距离
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
需求:
iponeX 以上機(jī)型,手機(jī)底部有弧度,自己寫的導(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)無法一一精確匹配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)聽頁(yè)面加載*/onLoad: function(options) {}, })然后設(shè)置導(dǎo)航底部padding距離即可;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
總結(jié)
以上是生活随笔為你收集整理的小程序根据手机机型设置自定义底部导航距离的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux系统export,Linux入
- 下一篇: 阅读乔布斯:一个人留下的世界