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


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 相关文章推荐
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
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读取CSV大文件导入数据库的实例
2017/07/24 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
Python列表计数及插入实例
2014/12/17 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Django权限机制实现代码详解
2018/02/05 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
python如何使用代码运行助手
2020/07/03 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
试用期员工考核制度
2014/01/22 职场文书
代理班主任的自我评价
2014/02/04 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2016新年慰问信范文
2015/03/25 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
python小程序之飘落的银杏
2021/04/17 Python
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers