交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 小程序根据手机机型设置自定义底部导航距离

    需求:

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

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

    您可能感兴趣的文章:

    • 微信小程序 (三)tabBar底部导航详细介绍
    • 微信小程序教程系列之设置标题栏和导航栏(7)
    • 微信小程序 配置顶部导航条标题颜色的实现方法
    • 微信小程序 开发之顶部导航栏实例代码
    • 微信小程序中顶部导航栏的实现代码
    • 详解微信小程序设置底部导航栏目方法
    • 微信小程序自定义导航隐藏和显示功能
    • 微信小程序实战之顶部导航栏(选项卡)(1)
    • 微信小程序实现滴滴导航tab切换效果

    广而告之:
    热门推荐:
    微信小程序如何获取用户信息

    最近在研究微信小程序怎么玩的。接触后发现好多的坑。 比如在浏览器中我们可以通过document.getElementById 获取到页面的DOM对象。而在微信小程序中是获取不到DOM对象的。document.getElementById() 直接报错 getElementById not function 我也是醉了。不支持这个好多有趣的···

    nodejs 后缀名判断限制代码

    现状: 冗余 在web开发中,我们是否常常会使用不同的编程语言实现相同的功能? 如一个文件上传功能,需要对上传文件进行文件格式限制。我们通常会使用后缀名做限制。 前端 为了用户体验,会在页面对用户选择的文件进行判断,合法才让用户可以上传。 复制代码 代码如下: f···

    在vue项目中集成graphql(vue-ApolloClient)

    1.什么是graphql GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时 下图展示graphql所处的位置 2.优点 1.GraphQL API 有强类型 schema GraphQL schema是强类型的,可使用SDL(GraphQL Schema Definition Language)来定义。比如,可以···

    TreeView无刷新获取text及value实现代码

    前台代码:复制代码 代码如下:<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">    <title></title>    <style type="text/css">    #middle{ top:0; left:0;···

    MySql使用skip-name-resolve解决外网链接客户端过慢问题

    在腾讯云上面搭建的mysql使用开发的电脑上navicat进行访问时总是特别的慢,原来是Mysql会对请求的地址进行域名解析,开发的电脑并没有域名,所以会导致特别的慢,使用以下进行解决 [mysqld] skip-name-resolve skip-grant-tables 官方的解释 How MySQL uses DNS When a new th···

    分割GBK中文遭遇乱码的解决方法

    类似如下的字符串(GBK), explode不能得到正确结果: 1.$result = explode("|", "滕华弢|海青"); 究其原因, 对于”弢”字(读tao,不认识没关系,我也不认识), 因为他的GBK编码值为: 8f7c, 不巧的是, “|”的ASCII值也是7c. 这样的问题, 还有很多 : 因为GBK编码的编码范围是: 0×81···

    php数组函数序列之array

    array_search()定义和用法 array_search() 函数与 in_array() 一样,在数组中查找一个键值。如果找到了该值,匹配元素的键名会被返回。如果没找到,则返回 false。 在 PHP 4.2.0 之前,函数在失败时返回 null 而不是 false。 如果第三个参数 strict 被指定为 true,则···

    jquery ajax执行后台方法

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="script/jquery-1.3.2.js" type="text/jscript"></script> <script type="text/jscript"> function sho···

    javascript实现的全国省市县无刷新多级关联菜单效果代码

    本文实例讲述了javascript实现的全国省市县无刷新多级关联菜单效果代码。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>全国省市县无刷新多级关联菜单</title> <meta http-equiv="Content-Type" con···

    WordPress开发中的get

    同get_post_meta()一样,用于返回文章的自定义字段值得一个函数,只不过get_post_custom()函数使用起来更简单,如果在循环中使用你甚至不需要设置任何参数。 其实get_post_custom()函数的基础实现与get_post_meta()大同小异~ get_post_custom()使用 get_post_custom($postid)···