VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 小程序根据手机机型设置自定义底部导航距离

    需求:

    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切换效果

    广而告之:
    热门推荐:
    JS设置手机验证码60s等待实现代码

     html: <div class="input"> <input class="tel input_all" type="text" name="tel" placeholder="手机号"> </div> <div class="input huoqu"> <input class="yzm input_all" type="text" name="code" placeholder="验证码"> <bu···

    JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例

    本文实例讲述了JavaScript数据结构与算法之二叉树插入节点、生成二叉树。分享给大家供大家参考,具体如下: javascript数据结构与算法-- 插入节点、生成二叉树 二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 /* *二叉树中,相对较小的值保存在左节点上,较···

    DedeCms标签Tags列表上一页导致链接URL出现横杠负数的解决方法

    自从安装了DedeCms至今,也有几年的时间了,一直没有注意过标签Tags,今日在分析IIS日志时发现,在tags的链接URL中出现横杠负数,形如:www.abc.com/tags.php?/veryhuo/-12/,那么为什么会出现这样的问题呢? 原因分析: 大家都知道蜘蛛爬行是根据URL网站结构来的,robot···

    MySQL 5.7 zip版本(zip版)安装配置步骤详解

    前言:重装win10顺带整理文件,然而装个MySQL用了我一下午,真是不值,所以写这篇来帮助大家。 一、下载 https://dev.mysql.com/downloads/mysql/ 二、解压缩zip包 三、配置环境变量 (1)配置Path (2)修改mysql-default.ini配置文件 原先的: # These are commonly set, ···

    HTML基本结构全面了解

    HTML简介 HyperText Markup Language:超文本标记语言 HyperText:超文本(文本 + 图片 + 视频 + 音频 + 链接) Markup Language:标记语言 网站的三大元素 图片,超链接,文字 HTML基本结构 XML/HTML Code复制内容到剪贴板 <html>       ···

    CentOS 7下MySQL服务启动失败的快速解决方法

    今天,启动MySQL服务器失败,如下所示: [root@spark01 ~]# /etc/init.d/mysqld start Starting mysqld (via systemctl): Job for mysqld.service failed because the control process exited with error code. See "systemctl status mysqld.service" and "journalctl -xe" f···

    php通过前序遍历树实现无需递归的无限极分类

    本文实例讲述了php通过前序遍历树实现无需递归的无限极分类。分享给大家供大家参考。具体如下: 大家通常都是使用递归实现无限极分类都知道递归效率很低,下面介绍一种改进的前序遍历树算法,不适用递归实现无限极分类,在大数据量实现树状层级结构的时候效率更高。 sql代码如···

    HTML5和CSS3实例教程总结(推荐)

    关于onclick的行为与内容分离 1.通过链接触发弹出窗口方式 (不推荐使用此方法!!!) XML/HTML Code复制内容到剪贴板 <a href='#'         onclcik = "window.open('holiday_pay.html',WinName,'width=300,&n···

    WordPress用户登录登出后重定向到指定页面的实现方法

    这篇文章将向您展示WordPress用户登录后如何重定向到指定页面或者文章的技巧。 一、重定向到网站管理面板。 将以下代码添加到您的当前主题的 functions.php 文件中: PHP Code复制内容到剪贴板  function soi_login_redirect($redirect_to, $request,&nb···

    DedeCms中arclist标签无法调用副栏目文章的解决办法

    最近发现dedecms中的文章在选择幅栏目后,在其对应的幅栏目列表中可以显示该文章,但在arclist 标签中却无法显示该文章,网上找了很多,解决办法都一样,但写法却写错了,导致arclist标签在使用了flag属性时会失效的问题。修正后的写法如下。 打开/include/taglib/arclist.···