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


Posted in Javascript onJune 04, 2019

需求:

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距离即可;

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

Javascript 相关文章推荐
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
基于JavaScript实现瀑布流布局
Aug 15 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
js回文数的4种判断方法示例
Jun 04 #Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 #Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 #Javascript
JavaScript之数组扁平化详解
Jun 03 #Javascript
JavaScript从原型到原型链深入理解
Jun 03 #Javascript
生产制造追溯系统之再说条码打印
Jun 03 #Javascript
VUE安装使用教程详解
Jun 03 #Javascript
You might like
PHP session会话的安全性分析
2011/09/08 PHP
php检测文件编码的方法示例
2014/04/25 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Django框架 querySet功能解析
2019/09/04 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
Python 在函数上添加包装器
2020/07/28 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
小学毕业家长寄语
2014/01/19 职场文书
幼儿园家长评语
2014/02/10 职场文书
法制报告会主持词
2014/04/02 职场文书
租车协议书范本
2014/04/22 职场文书
小学家长学校培训材料
2014/08/24 职场文书
先进党支部事迹材料
2014/12/24 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
天堂的孩子观后感
2015/06/11 职场文书
浅析Python实现DFA算法
2021/06/26 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js