微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题

news2024/9/20 22:40:51

我在这里写了个输入名称的头 在电脑上看着这输入效果还是挺优秀的
在这里插入图片描述
但当真的运行在手机上时 就会发现 这键盘一弹出来 就挡住我们的输入框了
在这里插入图片描述
这里 我们可以这样实现

在data中定义一个数值类型 叫 focusHeight
在这里插入图片描述
然后 给我们弹层 加上一个固定定位
在这里插入图片描述
然后 通过 focusHeight来控制它与界面底部的距离
在这里插入图片描述
这个变量默认是 0

然后 给输入框绑定一个bindkeyboardheightchange事件
在这里插入图片描述
bindkeyboardheightchange是一个小程序官方事件 用于监听键盘高度的变化

我们这里就可以在这个事件中 将键盘高度赋值给focusHeight
在这里插入图片描述
获取 event 下的 detail 下的 height 这三次 任何一个拿不到就直接赋值0
然后将结果赋值给focusHeight

然后 我们再次运行
这个就可以按键盘高度 设置与底部距离 从而在键盘上面了
在这里插入图片描述

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

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

相关文章

【MySQL】用户与权限管理

文章目录 一、用户管理1、用户信息表2、创建用户3、删除用户4、修改用户密码 二、权限管理1、MySQL 权限2、给用户授权3、回收用户权限 一、用户管理 之前为了方便,我们学习 MySQL 时统一使用的都是 root 账号进行登录,但在实际的开发场景中必然是需要进…

基于SpringBoot的水果销售网站

基于SpringBootVue的水果销售网站系统的设计与实现~ 开发语言:Java数据库:MySQL技术:SpringBootMyBatis工具:IDEA/Ecilpse、Navicat、Maven角色:管理员、商家、用户 系统展示 主页 水果详情 可直接购买,…

【Overload游戏引擎细节分析】standard材质Shader

提示:Shader属于GPU编程,难写难调试,阅读本文需有一定的OpenGL基础,可以写简单的Shader,不适合不会OpenGL的朋友 一、Blinn-Phong光照模型 Blinn-Phong光照模型,又称为Blinn-phong反射模型(Bli…

鸡尾酒学习——长岛冰茶

长岛冰茶 1、材料:冰块(或者雪莲)、白朗姆、伏特加、龙舌兰、金酒、柠檬、君度或者白兰地、可乐; 2、口感:酸甜苦口味,酒的苦涩较为明显(怀疑是自己放了过多的柠檬汁导致苦涩感明显&#xff09…

CrossOver 23.6 让Mac可以运行Windows程序的工具

在当今数字化时代,虚拟机技术被广泛应用于软件开发、系统测试、网络安全等领域。虚拟机提供了一个隔离的虚拟环境,使得我们能够在一台物理计算机上同时运行多个操作系统和应用程序。下面我们就来看虚拟机软件怎么安装,虚拟机怎么使用吧&#…

强制指定变量地址与局部优化

目录 一、强制编译器将变量分配到指定地址1. 编译器AC5.0与AC6.0有区别 二、 Keil/IAR局部优化1 IAR2.Keil AC5.03.Keil AC6.0 三 arm-none-eabi-gcc 下指定固定地址 一、强制编译器将变量分配到指定地址 1. 编译器AC5.0与AC6.0有区别 二、 Keil/IAR局部优化 1 IAR #pragma …

RTL SDR的PYTHON开发环境搭建

不得不说RTL SDR真是神器,直接把SDR的入门门槛拉低到了几十块钱。对于RTL SDR的学习开发,有大佬写的《Software_Defined_Radio_using_MATLAB_Simulink_and_the_RTL-SDR》,另外,除了MATLAB,近些年爆火的PYTHON当然也是可…

电厂数据可视化三维大屏展示平台加强企业安全防范

园区可视化大屏是一种新型的信息化手段,能够将园区内各项数据信息以图像的形式直观呈现在大屏幕上,便于管理员和员工进行实时监控、分析和决策。本文将从以下几个方面介绍园区可视化大屏的作用和应用。 VR数字孪生园区系统是通过将实际园区的各种数据和信…

2023年【起重信号司索工(建筑特殊工种)】试题及解析及起重信号司索工(建筑特殊工种)操作证考试

题库来源:安全生产模拟考试一点通公众号小程序 起重信号司索工(建筑特殊工种)试题及解析根据新起重信号司索工(建筑特殊工种)考试大纲要求,安全生产模拟考试一点通将起重信号司索工(建筑特殊工种)模拟考试试题进行汇编,组成一套起重信号司索…

leetcode 503. 下一个更大元素 II、42. 接雨水

下一个更大元素 II 给定一个循环数组 nums ( nums[nums.length - 1] 的下一个元素是 nums[0] ),返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序,这个数字之后的第一个比它更大的数&…

EMC简述01

电磁兼容性(EMC:Electromagnetic Compatibility) 电磁兼容性(EMC)主要分为两种 一种是设备本身的电磁噪声对其他设备或人体带来的影响(电磁干扰,EMI:Electromagnetic Interference…

我们在 Linux 环境中用 C 编程时,如果对文件读写,Linux 会自动给文件加锁嘛?以及怎么加文件锁?

task1: 验证Linux不会自动给文件加锁 先说结论&#xff0c;结论是不会 我写了一个这样的程序 #include <stdio.h> #include <unistd.h>int main() {const char* pathname "your_file_pathname.txt";FILE* file NULL;int count 100;if(access(pathn…

Linux 网络巨型帧设置方法

1.指令设置 sudo ifconfig eth0 mtu 8192 2.修改系统文件 sudo vim /etc/dhcp/dhclient.conf

Linux创建临时文件mkstemp()tmpfile()

有些程序需要创建一些临时文件&#xff0c;仅供其在运行期间使用&#xff0c;程序终止后即行删除。 很多编译器程序会在编译过程中创建临时文件。GNU C 语言函数库为此而提供了一系列库函数。&#xff08;之所以有“一系列”的库函数&#xff0c;部分原因是由于这些函数分别继…

opencalib中lidar2camera安装记录

目录 一、opencalib安装 二、lidar2camera的安装 三、测试运行 四、出现过的问题 一、opencalib安装 代码地址&#xff1a;https://github.com/PJLab-ADG/SensorsCalibration/blob/master/README.md # pull docker image sudo docker pull scllovewkf/opencalib:v1 # Aft…

DBOW概要理解与记录

前言 DBOW作为一种视觉回环技术被广泛应用在各类VSLAM框架中&#xff0c;之前的经验主要集中在使用和抽象理解层面&#xff0c;近期花了一些时间仔细阅读了相关论文和源码&#xff0c;这里做一些记录。 两个关键概念 Vocabulary 通过预先训练得到的词汇库&#xff0c;以树状…

RISC-V架构——中断委托和中断注入

1、中断委托 1.1、中断委托的作用 &#xff08;1&#xff09;默认情况下&#xff0c;所有的陷入&#xff08;中断和异常&#xff09;都是在M模式下处理&#xff0c;然后再返回到发生陷入前的模式&#xff1b; &#xff08;2&#xff09;所有陷入都在M模式处理会涉及到模式切换…

Python 面向对象编程:类、对象、初始化和方法详解

Python 是一种面向对象的编程语言。在 Python 中&#xff0c;几乎所有东西都是对象&#xff0c;都具有其属性和方法。 类似于对象构造函数或用于创建对象的“蓝图”的类。 创建一个类 要创建一个类&#xff0c;请使用关键字 class&#xff1a; 示例&#xff0c;创建一个名为…

【数据结构】数组和字符串(三):特殊矩阵的压缩存储:三角矩阵、对称矩阵——一维数组

文章目录 4.2.1 矩阵的数组表示4.2.2 特殊矩阵的压缩存储a. 对角矩阵的压缩存储b. 三角矩阵的压缩存储结构体初始化元素设置元素获取打印矩阵主函数输出结果代码整合 c. 对称矩阵的压缩存储元素设置元素获取主函数输出结果代码整合 4.2.1 矩阵的数组表示 【数据结构】数组和字…

图像数据噪音种类以及Python生成对应噪音

前言 当涉及到图像处理和计算机视觉任务时&#xff0c;噪音是一个不可忽视的因素。噪音可以由多种因素引起&#xff0c;如传感器误差、通信干扰、环境光线变化等。这些噪音会导致图像质量下降&#xff0c;从而影响到后续的图像分析和处理过程。因此&#xff0c;对于从图像中获…