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

需求:

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

程序根据手机机型设置自定义底部导航距离相关推荐

小程序根据手机机型设置自定义底部导航距离
需求: iponeX 以上机型,手机底部有弧度,自己写的导航栏会被遮住, 需要判断手机机型,做兼容设置. 解决: //app.js App({/*** 当小程序初始化完成时,会触发 onLaunch( ...
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题,适配ihone x,ihone 11 和12的机型修改前情况修改后情况打开项目文件 app.vueapp.vue1.增加全局参数 globalD ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
小程序自定义底部导航 custom-tab-bar
前言: 在开发小程序过程中,如果你需要根据不同用户角色显示不同底部导航:或者导航样式需要个性化设计.此时就需要用到自定义底部导航 custom-tab-bar. 具体操作: 1.根目录下创建custo ...
android 固定底部导航,如何设置android底部导航栏位置固定在android
请帮我设置底部导航栏位置固定在底部, ,因为我在输入editText字段时遇到问题,底部导航栏向上移动并覆盖其他领域如何设置android底部导航栏位置固定在android 代码: xmlns:and ...
uniapp 底部菜单_uni-app 自定义底部导航栏的实现
这是我目前发现较好的uni-app 自定义底部导航栏方法,其他方法的缺点主要是在切换时,要么会闪烁,要么会每点击一下,都会请求一次数据.如果有其他更好的方法,欢迎评论留言,最近才开始用uni-app写 ...
微信小程序判断手机机型信息及dpr
微信小程序判断手机机型信息及dpr=2.3 出现这个原因是因为手机dpr不同,导致在显示二维码时出现位置偏移.首先能想到的就是获取设备信息,根据不同机型而解决问题. 1.wxml 开控制位置间距var ...
华为手机怎么看图片属性_手机怎么更改微信主题华为手机怎么设置自定义主题...
阅读本文前,请您先点击上面的蓝色字体,再点击"关注",这样您就可以免费收到最新内容了.每天都有分享,完全是免费订阅,请放心关注.(图片来源于网络,侵权联系删除,谢谢) 1.先在手机 ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...

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

程序根据手机机型设置自定义底部导航距离相关推荐

最新文章

热门文章