vue 软键盘弹起底部按钮顶起来的问题

2023-11-18

vue 软键盘弹起 底部按钮fixed固定定位的button按钮顶起来的问题
底部的button按钮被手机弹起的软键盘顶起来,影响页面美观

-------html的内容-----

<div class="hold" v-show="isOriginHei"></div>

现在data中定义一个记录高度的属性以及判断button按钮是否隐藏的属性:

export default {
		data() {
			reuturn {
			isOriginHei: true,  //显示或者隐藏button
        	documentHeight: document.documentElement.clientHeight,  //默认屏幕高度
		}
	}
}

然后在我们需要将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法:

mounted() {
      // window.onresize监听页面高度的变化
      window.onresize = () => {
        return (() => {
          if(this.documentHeight>document.documentElement.clientHeight){
            this.isOriginHei = false
          }else{
            this.isOriginHei =true
          }
        })()
      }
    },

试过了可以解决~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 软键盘弹起底部按钮顶起来的问题 的相关文章

随机推荐

  • 如何快速增加大量用户和用户组

    Windows平台下 假设建有Domain A和Domain B 两者已经建立了信任关系 可以采用在命令行中输入如下命令在各自的domain中增加用户或用户组 1 增加用户组FOR L i in 1 1 10 DO dsadd group
  • 神经网络与深度学习笔记——代价函数,规范化,过拟合

    神经网络与深度学习笔记系列一共有五个专题 分别是第一章使用神经网络识别手写数字 梯度下降算法是什么 主要介绍了神经网络的基础例如感知器激活函数等概念 最主要介绍了梯度下降算法 第二章反向传播算法如何工作 反向传播算法原理 主要介绍了反向传播
  • 数据结构--二叉树-堆(1)

    文章目录 树 概念 相关的基本概念 树的表示 二叉树 概念 特殊二叉树 性质 堆 二叉树的顺序结构 堆的概念 堆的实现 初始化 数组初始化为堆 向上调整 向下调整 插入 删除 打印 摧毁 判空 获取堆顶数据 验证 堆的应用 堆排序 TopK
  • 磁盘测试工具FIO

    磁盘测试工具FIO https www cnblogs com klb561 p 11939355 html 目前主流的第三方IO测试工具有fio iometer和Orion 这三种工具各有千秋 fio在Linux系统下使用比较方便 iom
  • 淘宝官方订单API接口,获取售出的商品订单列表(爬虫数据)

    淘宝 天猫获取售出的商品订单列表 API 返回值说明 seller order list 获取售出的商品订单列表 公共参数 名称 类型 必须 描述 key String 是 调用key 必须以GET方式拼接在URL中 获取Key和secre
  • 大学英语六级历年真题Word,PDF,和音频 下载

    1 链接 https pan baidu com s 11w bAM1JoHTt HjNfor70g 提取码 ro6w 复制这段内容后打开百度网盘手机App 操作更方便哦 1 1 1 1 1 下载方式 扫码联系获取 1学习人工智能可以扫码关
  • C++函数指针定义及用法

    什么是函数指针 如果在程序中定义了一个函数 那么在编译时系统就会为这个函数代码分配一段存储空间 这段存储空间的首地址称为这个函数的地址 而且函数名表示的就是这个地址 既然是地址我们就可以定义一个指针变量来存放 这个指针变量就叫作函数指针变量
  • Windows游戏加速外挂-变速齿轮 学习笔记-【第一篇】

    找到两篇文章 是比较流行的方法 接下来记录一下收获 第一篇文章 变速齿轮 研究手记 转自 http www newasp net tech 58262 html 注意 如果你看了本文 对我们这个软件有兴趣 请到我们的主页www vrbrot
  • 幂等性常用的解决方案

    幂等性常用的解决方案 在进行讲解方案之前 我想先说一下什么是幂等性 下面是我用自己的理解说的 不是专业的术语 对于同样的多次请求 只会对第一次请求进行处理 多次请求返回的结果是相同的 幂等性的专业术语如下 选自百度百科 幂等 idempot
  • 数据科学与大数据分析项目练习-3将Apriori算法应用于R中提供的“Groceries”数据集

    R语言Apriori算法 项目要求 Project Start 规则生成和可视化 我们需要安装arules and arulesViz包 项目要求 生成频繁项目集满足下面条件 The minimum support threshold as
  • 异常检测-pyod包的入门使用

    本文github地址 pyod包的入门使用 文章目录 0异常检测简介 1pyod包简介 1 1注意事项 1 2函数的通用使用方法 1 3模型保存 1 4三个函数组 1 5不同模型在基准数据上的表现 1 6多个基准检测器的结合 2异常值检测示
  • 15 个 Android 通用流行框架大全

    转自 http www androidchina net 4920 html rd sukey 3903d1d3b699c208f96a43a12fc2e7ae683c66523214d79bc81eec0c330d577be318928c
  • 2021-06-22

    Ubuntu16 04系统安装ROS时出现sudo rosdep init ERROR default sources list file already exists etc ros rosdep sources list d 20 de
  • 操作系统:磁盘调度实验之扫描和循环扫描调度算法(含源码和文档)

    目录 第一章 实验相关概述 1 扫描算法 2 循环扫描算法 第二章 实验的目的及要求 1 目的 2 要求 第三章 实验的实现思路及步骤 1 扫描算法 2 循环扫描算法 第四章 实验结果分析 1 优缺点及区别 2 实现代码及截图 第五章 实验
  • 【论文阅读-ICSE-2021】CodeShovel: 构造方法级别上的源代码历史信息 Constructing Method-Level Source Code Histories

    CodeShovel Constructing Method Level Source Code Histories Conference ICSE 2021 Github https github com ataraxie codesho
  • Python GUI实战:全方位图形界面设计实践

    Python GUI实战 全方位图形界面设计实践 Python是一种强大的编程语言 且具备广泛的应用场景 其中 图形界面设计是Python的一个重要应用领域 通过图形界面设计 可以让用户更加直观 友好地使用软件 本文将介绍如何使用Pytho
  • 怎么删除win10系统的AdobeFlash

    随着移动端的趋势大流 HTML5应用场景更加的广泛 Flash逐渐走向没落 Flash短期时间并不会彻底消失掉 Adobe Flash FLASH不只是可以制作网页 还可以制作软件AIR 制作动画 制作游戏等等 现在最新版的软件改名为Ani
  • Linux writeback机制

    Linux 采用内存页来缓存磁盘文件内容 从而提高系统整体IO访问性能 这就是我们熟知的pagecache机制 对于进程的一次写文件操作 内核只是简单的把修改写到内存 并把页面标记为脏页 然后直接返回 具体的回写操作 由内核周期性的启动线程
  • springboot 快速集成Redis,非常简单

    gt gt 快速开始 创建springboot项目 引入redis pom依赖 如下
  • vue 软键盘弹起底部按钮顶起来的问题

    vue 软键盘弹起 底部按钮fixed固定定位的button按钮顶起来的问题 底部的button按钮被手机弹起的软键盘顶起来 影响页面美观 html的内容 div class hold div 现在data中定义一个记录高度的属性以及判断b