解决uni-app中使用webview键盘弹起遮挡input输入框问题

这个平平无奇的回答,可能是全网最靠谱的解决方案。
这里我用的是vue3 setup .vue文件的方式

<view>
<web-view :fullscreen="false" :webview-styles="{top: statusBarHeight+40,height:height,progress: {color: 'green',height:'1px' } }"   :src="url"></web-view>
</view>

解决这个问题的核心就在这个height,你不信把这个height去掉问题就解决了,可是会导致底部被遮挡住的问题。解决办法就是键盘弹起的时候把height改成null,放下的时候恢复。

上魔法

import {onLoad,onShow,onReady,onUnload,onNavigationBarButtonTap,} from "@dcloudio/uni-app";const width = ref();const height = ref();const title = ref("标题");const ref_webview = ref();const statusBarHeight = ref(40)onLoad((options) => {url.value = options.url;let res = uni.getSystemInfoSync();width.value = res.screenWidth;statusBarHeight.value = res.statusBarHeight;height.value = res.screenHeight - statusBarHeight.value - 40;uni.onKeyboardHeightChange(onKeyboardHeightChange);});onUnload(()=>{uni.offKeyboardHeightChange(onKeyboardHeightChange);}) //这里是核心function onKeyboardHeightChange(res){if(res.height==0){let res = uni.getSystemInfoSync();height.value = res.screenHeight - statusBarHeight.value - 40;}else{height.value = null}}

可以到这里下载体验我的app https://aweb123.com

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/721109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

哪里有优质短视频素材网站?分享高质量的短视频素材网站资源

嘿&#xff0c;小伙伴们&#xff0c;是不是在做短视频的时候总觉得少点什么味道&#xff1f;那肯定是因为缺少了那些能让你的视频“味道”更足的素材啦。不用愁&#xff0c;今天我来给大家分享几个超给力的短视频素材网站&#xff0c;保证让你的创作更上一层楼 1蛙学府资源 这…

【C++】String常用的函数总结

一、string的构造函数方式&#xff1a; 代码形式&#xff1a; void Test1() {string s1(); // 空字符串string s2("Hello World"); // 字符串初始化为 "Hello World" string s3(s2); //拷贝构造: 将s2复制给s3、 输出为: Hello Worldstring s4(s2,…

[DevOps云实践] IaaC:通过CloudWatch Agent和自定义Metric监视服务器

[DevOps云实践] IaaC:通过CloudWatch Agent和自定义Metric监视服务器 现在有许多第三方工具可以用于监控EC2实例。尽管事实如此,我想为您提供使用AWS原生资源和工具(如AWS CloudWatch、CloudWatch Agent和CloudFormation)快速设置EC2监控所需的所有信息。 首先,您应该知…

常用通讯协议的理解

一、通讯的一些基本认知 1、什么是异步或同步通信 异步通信在发送字符时&#xff0c;所发送的字符之间的时间间隔可以是任意的。发送端可以在任意时刻开始发送字符&#xff0c;因此必须在每一个字符的开始和结束的地方加上标志&#xff0c;即加上开始位和停止位&#xff0c;以…

Redis 由浅入深 (7) - 集群操作手册

目录 Redis运维查询命令登录redis集群&#xff08;登录任意一台即可&#xff09;查询redis集群信息&#xff08;登录之后&#xff09;通过客户端执行命令&#xff08;redis-cli&#xff09;查询正则“pattern”所有的key redis 启动和创建的命令Redis 常用命令redis 手动命令设…

【深度学习】脑部MRI图像分割

案例4&#xff1a;脑部MRI图像分割 相关知识点&#xff1a;语义分割、医学图像处理&#xff08;skimage, medpy&#xff09;、可视化&#xff08;matplotlib&#xff09; 1 任务目标 1.1 任务简介 本次案例将使用深度学习技术来完成脑部MRI(磁共振)图像分割任务&#xff0c…

ETH网络权益证明(PoS)

权益证明 - POS 权益证明是一种证明验证者已经将有价值物品质押到网络上的方法。如果验证者有失信行为&#xff0c;这些物品可能会被销毁。 在以太坊的权益证明机制下&#xff0c;验证者明确地通过以太币将资产质押到以太坊上的智能合约中。 之后&#xff0c;验证者负责检查在网…

python概率分析:为什么葫芦娃救爷爷是一个一个地救成功率最高?

关键词&#xff1a; Python 、葫芦娃 、 概率计算 、 数学 、 建模 前言 过完年了返工后想起了小孩子们爱看的葫芦娃救爷爷的动画片&#xff0c;葫芦娃为什么是一个一个前去救爷爷&#xff0c;为什么不等着七个一起去救爷爷。带着这个疑问&#xff0c;我决定今天用数学的角度…

Linux开发工具使用

一、Linux软件包管理器 yum 软件包和软件包管理器, 就好比 "App" 和 "应用商店" &#xff0c;我们现在要安装的yum就是相当于在我们的Linux终端安装一个"应用商店"。 但使用yum时&#xff0c;我们一定要保证主机(虚拟机)网络畅通!这点也非常好理…

分类问题经典算法 | 二分类问题 | Logistic回归:公式推导

目录 一. Logistic回归的思想1. 分类任务思想2. Logistic回归思想 二. Logistic回归算法&#xff1a;线性可分推导 一. Logistic回归的思想 1. 分类任务思想 分类问题通常可以分为二分类&#xff0c;多分类任务&#xff1b;而对于不同的分类任务&#xff0c;训练的主要目标是…

RabbitMQ(三):AMQP协议

目录 1 AMQP协议1.1 AMQP协议介绍1、AMQP是什么2、消息代理中间件的职责 1.2 AMQP 0-9-1模型1、AMQP的工作过程2、交换器和交换器类型3、队列队列属性队列名称队列持久化 1.3 几个概念1、绑定2、消费者3、消息确认4、预取消息5、消息属性和有效载荷&#xff08;消息主体&#x…

HTML5:七天学会基础动画网页7

CSS3高级特效 2D转换方法 移动:translate() 旋转:rotate() 缩放:scale() 倾斜:skew() 属性:transform 作用:对元素进行移动,旋转,缩放,倾斜。 2D移动 设定元素从当前位置移动到给定位置(x,y) 方法 说明 translate(x,y) 2D转换 沿X轴和Y轴移…

概率基础——极大似然估计

概率基础——极大似然估计 引言 极大似然估计&#xff08;Maximum Likelihood Estimation&#xff0c;简称MLE&#xff09;是统计学中最常用的参数估计方法之一&#xff0c;它通过最大化样本的似然函数来估计参数值&#xff0c;以使得样本出现的概率最大化。极大似然估计在各…

学习JAVA的第十三天(基础)

目录 API之Arrays 将数组变成字符串 二分查找法查找元素 拷贝数组 填充数组 排序数组 Lambda表达式 集合的进阶 单列集合 体系结构 Collection API之Arrays 操作数组的工具类 将数组变成字符串 //将数组变成字符串char[] arr {a,b,c,d,e};System.out.println(Arra…

Python常用验证码标注和识别(需求分析和实现思路)

目录 一、需求分析 图像验证码识别&#xff1a; 文本验证码识别&#xff1a; 二、实现思路 三、案例与代码 四、总结与展望 在当今的数字时代&#xff0c;验证码&#xff08;CAPTCHA&#xff09;作为一种安全机制&#xff0c;广泛应用于网站和应用程序中&#xff0c;以防…

Method Not Allowed (GET): /user/logout/

在使用 DJango 框架使用框架默认的【登出】视图时&#xff0c;发现报错如下&#xff1a; Method Not Allowed (GET): /user/logout/ Method Not Allowed: /user/logout/ 退出部分的代码原先如下&#xff08;登出部分见第6行&#xff09;&#xff1a; <p><a href"…

MySQL 8.0.35 企业版安装和启用TDE插件keyring_encrypted_file

本文主要记录MySQL企业版TDE插件keyring_encrypted_file的安装和使用。 TDE说明 TDE( Transparent Data Encryption,透明数据加密) 指的是无需修改应用就可以实现数据的加解密&#xff0c;在数据写磁盘的时候加密&#xff0c;读的时候自动解密。加密后其他人即使能够访问数据库…

Unity 摄像机的深度切换与摄像机画面投影

摄像机可选&#xff1a;透视、正交 正交类似投影&#xff0c;1比1 透视类似人眼&#xff0c;近大远小 摄像机投影 在项目中新建&#xff1a;渲染器纹理 将新建纹理拖动到相机的目标纹理中 新建一个平面&#xff0c;将新建材质组件放到平面中即可。 相机深度切换 使用代…

93. 通用防重幂等设计

文章目录 一、防重与幂等的区别二、幂等性的应用场景三、幂等性与防重关系四、处理流程 一、防重与幂等的区别 防重与幂等是在 Web 应用程序和分布式系统中重要而又非常常见的问题。 防重 防重是指在多次提交同样的请求过程中&#xff0c;系统会检测和消除重复的数据&#xf…

HTTP有什么缺陷,HTTPS是怎么解决的

缺陷 HTTP是明文的&#xff0c;谁都能看得懂&#xff0c;HTTPS是加了TLS/SSL加密的&#xff0c;这样就不容易被拦截和攻击了。 SSL是TLS的前身&#xff0c;他俩都是加密安全协议。前者大部分浏览器都不支持了&#xff0c;后者现在用的多。 对称加密 通信双方握有加密解密算法…