解决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.mfbz.cn/a/431667.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Claude 3 模型发布,压力来到OpenAI这边了~

Anthropic 发布了 Claude 3 系列&#xff0c;包含了三款模型 各具特色&#xff0c;旨在为用户提供更智能、更快速、更高效的选择&#xff0c;可以说是是迄今为止最快、最强大的人工模型&#xff01; Anthropic 一度是 OpenAI 最强力的竞争对手&#xff01; 随着 Claude3 的发…

基于Springboot的高校实习信息发布网站的设计与实现(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的高校实习信息发布网站的设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xf…

2023 2024年全国职业院校技能大赛中职组网络建设与运维赛项服务器Linux部分教程解析

欢迎合作 需要资料请私 Rocky 9 包含各种常考服务(包括新题型KVM等)

类与对象(二)--类的六个默认成员函数超详细讲解

目录 1.类的默认六个成员函数✒️ 2.构造函数 2.1构造函数的概念✒️ 2.2构造函数的特性✒️ 3.析构函数 3.1析构函数的概念✒️ 3.2析构函数的特征✒️ 4.拷贝构造函数 4.1拷贝构造函数的概念✒️ 4.2拷贝构造函数的特征✒️ 4.3思考❓ 4.4深拷贝和浅拷贝⭐️…

【[STM32]标准库-自定义BootLoader】

[STM32]标准库-自定义BootLoader BootloaderBootloader的实现BOOTloader工程APP工程 Bootloader bootloader其实就是一段启动程序&#xff0c;它在芯片启动的时候最先被执行&#xff0c;可以用来做一些硬件的初始化或者用作固件热更新&#xff0c;当初始化完成之后跳转到对应的…

CDN是什么?CDN能为我们做什么?

CDN 概念 CDN&#xff0c;全称为 Content Delivery Network&#xff0c;意为内容分发网络&#xff0c;是一种通过在全球各地部署服务器节点来加速内容传输的网络架构。 传统上&#xff0c;当用户访问一个网站或应用时&#xff0c;请求会直接发送到托管网站的服务器。但是&…

[前端][死循环]问题发现[easyui]

文章目录 问题描述问题细节 解决思路综合分析 解决办法 问题描述 页面点击按钮跳转弹窗页面回显出数据 此弹窗页面中有年份&#xff0c;类型等&#xff0c;当选中年份/类型会重新触发回显方法(onSelect 中调用方法)&#xff0c;回显对应年份/类型得数据 问题细节 最开始调试…

linux小记(1)

基本概念&#xff1a;不依靠扩展名来区分文件类型 好处&#xff1a;除了文本文件其他所有windows文件都无法在Linux下运行&#xff0c;包括病毒木马。 坏处&#xff1a;所有的软件都需要对linux单独开发 习惯用后缀来区分文件&#xff0c;方便管理。 -压缩包&#xff1a;*.…

Springboot配置MySQL数据库

Springboot配置MySQL数据库 一、创建springboot项目&#xff0c;并添加如下依赖 <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope> </dependency>二、在applica…

从事测绘地信,你需要这些插件、软件、小工具、图源...

特别声明&#xff0c;本篇是来自公众号GIS前沿的资源&#xff0c;看着比较好&#xff0c;特别给大家推荐。加粗样式 今天&#xff0c;我们又来汇总了一些工作中实用的插件、小工具、数据等等&#xff0c;小助手又来帮你提高工作效率了****。 因为小助手每年都会总结一次&…

【网站项目】308学生档案管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

UOS 20 安装redis 7.0.11 安装redis 7.0.11时 make命令 报错 /bin/sh: cc: command not found

UOS 20 安装redis 7.0.11 1、下载redis 7.0.112、安装redis 7.0.113、启动停止redis 7.0.114、安装过程问题记录 UOS 20 安装redis 7.0.11 安装redis 7.0.11时 make命令 报错 /bin/sh: cc: command not found、zmalloc.h:50:31: fatal error: jemalloc/jemalloc.h: No such fil…

cuda python torch 虚拟环境配置

以下是Pytorch和CUDA对应的版本 以下是Pytorch和Python对应的版本 检查cuda与Python版本是否匹配 import torch print(torch.__version__) print(torch.cuda.is_available()) print(torch.empty(3,4,devicecuda))cuda 删除cuda conda uninstall cudatoolkit --forceconda u…

MySQL的初学者教程—Navicat的基本操作方法

MySQL的初学者教程—Navicat的基本操作方法 1、运行Navicat 双击桌面的Navicat 12 for MySQL。 2、新建MySQL连接 点击【测试连接】。 zyyMySQL的连接创建成功&#xff01; 3、新建数据库 4、新建表 点击【保存】 表【usermanage】建好了。 点【usermanage】的鼠标右键&#…

基于springboot实现流浪动物救助网站系统项目【项目源码+论文说明】

基于springboot实现流浪动物救助网站系统演示 摘要 然而随着生活的加快&#xff0c;也使很多潜在的危险日益突显出来&#xff0c;比如在各种地方会发现很多无家可归的、伤痕累累的、可怜兮兮的动物&#xff0c;当碰到这种情况&#xff0c;是否会立马伸出双手去帮助、救助它们&…

Golang 开发实战day02 - Print Formatting

Golang 教程02 - Print&#xff0c;Formatting Strings Go语言提供了丰富的格式化字符串功能&#xff0c;用于将数据格式化为特定格式的字符串。本课程将详细介绍Go语言中Print和Formatting Strings的用法&#xff0c;并提供代码示例供大家参考。 Print 类型及使用 1.Print …

⭐北邮复试刷题2369. 检查数组是否存在有效划分__DP (力扣每日一题)

2369. 检查数组是否存在有效划分 给你一个下标从 0 开始的整数数组 nums &#xff0c;你必须将数组划分为一个或多个 连续 子数组。 如果获得的这些子数组中每个都能满足下述条件 之一 &#xff0c;则可以称其为数组的一种 有效 划分&#xff1a; 子数组 恰 由 2 个相等元素…

基于Springboot的足球俱乐部管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的足球俱乐部管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍: 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff…

【JavaEE】_Spring MVC项目使用数组与集合传参

目录 1. 使用数组传参 1.2 传递单个参数 1.3 传递多个名称相同的参数 1.3.1 关于urlencode 2. 使用集合传参 1. 使用数组传参 创建一个Spring MVC项目&#xff0c;其中 .java文件内容如下&#xff1a; package com.example.demo.controller;import com.example.demo.Per…

【快速上手QT】07-对话框QDialog

QDialog 今天讲一个我们这个系列的第一篇就提到的东西&#xff1a;QDialog。 相信经过前几篇的学习&#xff0c;大家应该是能够通过QT助手来对QDialog有个初步的了解。 我们就直接来测试一下。 #include "Zhetu.h"#include <qdebug.h> #include <QPushBu…
最新文章