小程序根据手机机型设置自定义底部导航距离

 更新时间:2019年06月04日 08:35:57   作者:zhang_haoqi  
这篇文章主要为大家详细介绍了小程序根据手机机型设置自定义底部导航距离,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

需求:

iponeX 以上机型,手机底部有弧度,自己写的导航栏会被遮住, 需要判断手机机型,做兼容设置.

解决:

//app.js
App({

 /**
  * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
  */
 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;
    }
   }
  })
 },

 /**
  * 当小程序启动,或从后台进入前台显示,会触发 onShow
  */
 onShow: function(options) {

 },

 /**
  * 当小程序从前台进入后台,会触发 onHide
  */
 onHide: function() {

 },

 /**
  * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
  */
 onError: function(msg) {

 },

 BOTTOM_DISTANCE:0,//iponeX底部需要抬高的距离
})

页面js

const app = getApp();

Page({

 /**
  * 页面的初始数据
  */
 data: {
  bottom: app.BOTTOM_DISTANCE//将app实例中的BOTTOM_DISTANCE转化为页面的data,即可在xml上使用
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {
 },
})

然后设置导航底部padding距离即可;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Webstorm开发uni-app项目详细图文教程

    Webstorm开发uni-app项目详细图文教程

    这篇文章主要介绍了使用WebStorm和UniappTool创建和运行uni-app项目的相关资料,包括配置微信开发者工具和运行项目,同时提到了创建新页面和使用uniapptool存在的弊端,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • 微信小程序如何获知用户运行小程序的场景教程

    微信小程序如何获知用户运行小程序的场景教程

    这篇文章主要给大家介绍了在微信小程序中如何获知用户运行小程序场景的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来跟着小编一起来看看吧。
    2017-05-05
  • JavaScript截取、切割字符串的技巧

    JavaScript截取、切割字符串的技巧

    这篇文章主要介绍了JavaScript截取、切割字符串的技巧,文中给大家提到了substr 和 substring方法的区别,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2016-01-01
  • js实现飞机大战小游戏

    js实现飞机大战小游戏

    这篇文章主要为大家详细介绍了js实现飞机大战小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 微信小程序三级联动选择器使用方法

    微信小程序三级联动选择器使用方法

    这篇文章主要为大家详细介绍了微信小程序三级联动选择器使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • js 自定义个性下拉选择框示例

    js 自定义个性下拉选择框示例

    下拉选择框想必大家并不陌生,一边情况下都是使用默认的,为了打破传统,下面与大家分享下使用js自定义下拉选择框示例代码,感兴趣的朋友可以参考下
    2013-08-08
  • 红米手机抢购的js代码

    红米手机抢购的js代码

    这篇文章主要介绍了红米手机抢购时返回的js代码,制作红米抢购软件时可以用到,,需要的朋友可以参考下
    2014-03-03
  • 利用javascript实现web页面中指定区域打印

    利用javascript实现web页面中指定区域打印

    将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容
    2013-10-10
  • 奇偶行高亮显示及鼠标划过高亮显示类

    奇偶行高亮显示及鼠标划过高亮显示类

    奇或偶数行高亮显示及鼠标莫过高亮显示,一个经常用到的效果,也能谷歌到大把的这种效果JS,但好像还没有一个封装成类直接用的.想象自己当初谷歌这个类时,还真没少折腾时间.
    2010-07-07
  • JS求解两数之和算法详解

    JS求解两数之和算法详解

    这篇文章主要介绍了JS求解两数之和算法,结合实例形式详细分析了JS求解两数之和算法相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-04-04

最新评论