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

 更新时间: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距离即可;

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

相关文章

  • js实例属性和原型属性示例详解

    js实例属性和原型属性示例详解

    本文通过实例向大家讲述了js实例属性和原型属性,详情请看注释,看不懂的话,请放弃javascript吧。
    2014-11-11
  • 利用JavaScript模拟京东按键输入功能

    利用JavaScript模拟京东按键输入功能

    这篇文章主要给大家介绍了关于如何利用JavaScript模拟京东按键输入功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Bootstrap使用基础教程详解

    Bootstrap使用基础教程详解

    Bootstrap ——来自Twitter的流行前端框架。接下来通过本文给大家介绍bootstrap入门基础脚本,包括bootstrap特征及使用方面的知识点,感兴趣的朋友一起看看吧
    2016-09-09
  • 13个PHP函数超实用

    13个PHP函数超实用

    这篇文章为大家整理了13个PHP函数超实用,函数是PHP如此强大的源泉,但是很多PHP函数并没有得到充分的利用,本文的13个PHP函数大家一定要真正掌握。
    2015-10-10
  • js中的reduce()函数讲解

    js中的reduce()函数讲解

    今天小编就为大家分享一篇关于js中的reduce()函数讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • layDate日期控件使用方法详解

    layDate日期控件使用方法详解

    这篇文章主要为大家详细介绍了layDate日期控件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js实现全选和全不选

    js实现全选和全不选

    这篇文章主要为大家详细介绍了js实现全选和全不选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 小程序实现tab更换页面效果

    小程序实现tab更换页面效果

    这篇文章主要为大家详细介绍了小程序实现tab更换页面效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS函数本身的作用域实例分析

    JS函数本身的作用域实例分析

    这篇文章主要介绍了JS函数本身的作用域,结合实例形式分析了JS函数作用域相关原理、操作技巧与使用注意事项,需要的朋友可以参考下
    2020-03-03
  • 显示今天的日期js代码(阳历和农历)

    显示今天的日期js代码(阳历和农历)

    这篇文章主要介绍了Js中显示日期和农历的代码,很简单,但很实用,有图片,需要的朋友可以参考下
    2014-09-09

最新评论