微信小程序中键盘弹起输入框自动跳到键盘上方处理
效果展示
键盘未弹起时

键盘弹起后:

实现方式
话就不多说了 我直接贴代码了
原理就是用你点击的输入框的底部 距离顶部的位置 减去屏幕高度除以2,然后设成负值,再将这个值给到最外层相对定位的盒子的top属性,这样就不会出现顶部导航上移的问题了具体实现如下:
首先封装一个js工具包,这个包其实有很多东西的,但是对键盘没什么用,我就去掉了,是一个设备工具类,没事的话可以去研究,设备工具类在开发的过程中还是用处比较大的。
工具类实现
/*** 设备工具类*/
class DeviceUtil {/*** 获取当前环境 开发工具 安卓 IOS* 'ios': iOS微信(包含 iPhone、iPad);'android': Android微信;'windows': Windows微信;'mac': macOS微信;'devtools': 微信开发者工具;*/getCurrentEnv() {var platform = '';wx.getSystemInfo({success(res) {platform = res.platform}})console.log(platform);return platform;}/*** 获取设备的屏幕高度*/getDeviceHeight() {var screenHeight = '';wx.getSystemInfo({success: (res) => {screenHeight = res.windowHeight}});return screenHeight;}/*** 监听点击输入框页面弹起事件* 使用说明:* 该方法对IOS上的 <vant-field type="textarea" /> 会有显示不全的问题 不建议在textarea上使用* * @param {当前页面指向} that * @param {点击事件参数} e */keyboard(that, e) {// 获取屏幕高度var height = this.getDeviceHeight();// 仅在手机上使用此函数if (this.getCurrentEnv() == 'android' || this.getCurrentEnv() == 'ios') {that.setData({keyboard: 0})// 创建一个选择器查询对象const query = wx.createSelectorQuery();// 选择要获取的元素query.select('#' + e.currentTarget.dataset.id).boundingClientRect(function (rect) {// 获取元素的位置和尺寸等信息var top = (-(rect.bottom - (height / 2))) < 0 ? (-(rect.bottom - (height / 2))) : 0that.setData({keyboard: top})}).exec();}}/*** 关闭键盘* @param {*} that */closeKeyboard(that) {if (this.getCurrentEnv() == 'android' || this.getCurrentEnv() == 'ios') {that.setData({keyboard: 0})}}}const deviceUtil = new DeviceUtil();
export default deviceUtil;
WXML中为元素添加属性
紧接着在wxml文件中需要给vant-field标签添加一些属性,input标签也相同
<view class="form_warp" style="top: {{keyboard}}px;">
<van-fieldid="name1"data-id="name1"bind:focus="onFocus"bind:blur="onBlur"always-embedvalue="{{ value }}"label="用户名1"placeholder="请输入用户名1"adjust-position="{{false}}"border="{{ false }}"/></view>
注意 :id 和data-id名称必须一致并且在当前页面唯一,不然会出现问题
always-embed是因为vant在IOS上会出现一个定位后不同层的问题,推荐加上;adjust-position="{{false}}"这个属性是必须加上的,他是键盘弹起时页面上移,顶部栏被顶上去的罪魁祸首。
不要忘记在最外层的盒子上添加这个属性style="top: {{keyboard}}px;"
WXSS
.form_warp {padding: 30rpx;position: relative;
}
JS中实现
紧接着在js中使用工具包
import deviceUtil from '../../util/device-utils';
Page({/*** 页面的初始数据*/data: {// 键盘弹起上移距离keyboard: 0,},onFocus(e) {// 键盘处理deviceUtil.keyboard(this, e)},onBlur() {deviceUtil.closeKeyboard(this)},
})
就这么简单, 其实也可以直接去用键盘高度来计算,这种方式其实是保证在键盘弹起的时候foucs事件的输入框会被展示在手机屏幕中间靠上的位置,而一般的键盘高度不会高于手机屏幕的一半,如果追求细节的话可以去改改那个计算公式就可以。
相关文章:
微信小程序中键盘弹起输入框自动跳到键盘上方处理
效果展示 键盘未弹起时 键盘弹起后: 实现方式 话就不多说了 我直接贴代码了 原理就是用你点击的输入框的底部 距离顶部的位置 减去屏幕高度除以2,然后设成负值,再将这个值给到最外层相对定位的盒子的top属性,这样就不会出现顶…...
excel将主信息和明细信息整理为多对多(每隔几行空白如何填充)
excel导出的数据是主信息和明细信息形式。 方法如下:1、首先,从第一个单元格开始选中要填充的数据区域。2、按CtrlG或者F5调出定位对话框,点击左下角的【定位条件】。3、在【定位条件】中选择【空值】,然后点击【确定】按钮。4、按照上述操作…...
卷积神经网络实现彩色图像分类 - P2
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍦 参考文章:365天深度学习训练营-第P2周:彩色识别🍖 原作者:K同学啊 | 接辅导、项目定制🚀 文章来源:K同学的学习圈子…...
【博客694】k8s kubelet 状态更新机制
k8s kubelet 状态更新机制 场景: 当 Kubernetes 中 Node 节点出现状态异常的情况下,节点上的 Pod 会被重新调度到其他节点上去,但是有的时候我们会发现节点 Down 掉以后,Pod 并不会立即触发重新调度,这实际上就是和 K…...
【博客692】grafana如何解决step动态变化时可能出现range duration小于step
grafana如何解决step动态变化时可能出现range duration小于step 1、grafana中的step和resolution grafana中的 “step” grafana本身是没有提供step参数的,因为仪表盘根据查询数据区间以及仪表盘线条宽度等,对于不同查询,相同的step并不能…...
eNSP:ibgp的破水平切割练习
实验要求: 拓扑展示: 命令操作: R1: <Huawei>sys [Huawei]sys r1 [r1]int g 0/0/1 [r1-GigabitEthernet0/0/1]ip add 12.1.1.1 24 [r1-GigabitEthernet0/0/1]int lo0 [r1-LoopBack0]ip add 1.1.1.1 24 [r1-LoopBack0]osp…...
maven是什么?安装+配置
目录 1.什么是maven? 1.2.maven的核心功能是什么? 2.Maven安装配置 2.1Maven的安装 2.2Maven环境配置 1.配置 MAVEN_HOME ,变量值就是你的 maven 安装的路径(bin 目录之前一级目录) 2.将MAVEN_HOME 添加到Path系…...
基于长短期神经网络LSTM的多分类代码
目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 基于长短期神经网络LSTM的股票预测 MATALB编程实现,附有代码:基于长短期神经网络LSTM的多分类代码,基于LSTM的多分类预测-深度学习文档类资源-CSDN文库 https://download.csdn.net/download/abc991835105/88184779 效果图 结果…...
利用爬虫爬取图片并保存
1 问题 在工作中,有时会遇到需要相当多的图片资源,可是如何才能在短时间内获得大量的图片资源呢? 2 方法 我们知道,网页中每一张图片都是一个连接,所以我们提出利用爬虫爬取网页图片并下载保存下来。 首先通过网络搜索…...
设计模式之Bridge模式的C++实现
目录 1、Bridge模式的提出 2、Bridge模式的定义 3、Bridge模式总结 4、需求描述 5、多继承方式实现 6、使用Bridge设计模式实现 1、Bridge模式的提出 在软件功能模块设计中,如果类的实现功能划分不清晰,使得继承得到的子类往往是随着需求的变化&am…...
springboot异步任务
在Service类声明一个注解Async作为异步方法的标识 package com.qf.sping09test.service;import org.springframework.scheduling.annotation.Async; import org.springframework.stereotype.Service;Service public class AsyncService {//告诉spring这是一个异步的方法Asyncp…...
Flutter父宽度自适应子控件的宽度
需求: 控件随着金币进行自适应宽度 image.png 步骤: 1、Container不设置宽度,需要设置约束padding; 2、文本使用Flexible形式; Container(height: 24.dp,padding: EdgeInsetsDirectional.only(start: 8.dp, end: 5.d…...
什么是 API 安全?学习如何防止攻击和保护数据
随着 API 技术的普及,API 安全成为了一个越来越重要的问题。本文将介绍什么是 API 安全,以及目前 API 面临的安全问题和相应的解决方案。 什么是 API 安全 API 安全是指保护 API 免受恶意攻击和滥用的安全措施。API 安全通常包括以下几个方面࿱…...
简述 TCP 和 UDP 的区别以及优缺点和使用场景?
一、TCP与UDP区别总结: 1、TCP面向连接(如打电话要先拨号建立连接);UDP是无连接的,即发送数据之前不需要建立连接 2、TCP提供可靠的服务。也就是说,通过TCP连接传送的数据,无差错,不丢失&…...
react进阶
react-virtualized的高阶组件,Autosize可以使屏幕适配。使用render-props模式来获取到AutoSizer组件暴露的width和height属性。JSON.parse(JSON.stringify())不适用于有undefined的数据。 深拷贝的使用,不能使用在有undefined的数据中。有直接过滤undefi…...
使用windows搭建WebDAV服务,并内网穿透公网访问【无公网IP】
文章目录 1. 安装IIS必要WebDav组件2. 客户端测试3. 使用cpolar内网穿透,将WebDav服务暴露在公网3.1 打开Web-UI管理界面3.2 创建隧道3.3 查看在线隧道列表3.4 浏览器访问测试 4. 安装Raidrive客户端4.1 连接WebDav服务器4.2 连接成功4.2 连接成功 1. Linux(centos8…...
科技感响应式管理系统后台登录页ui设计html模板
做了一个科技感的后台管理系统登录页设计,并且尝试用响应式布局把前端html写了出来,发现并没有现象中的那么容易,chrome等标准浏览器都显示的挺好,但IE11下面却出现了很多错位,兼容起来还是挺费劲的,真心不…...
Lombok的使用及注解含义
文章目录 一、简介二、如何使用2.1、在IDEA中安装Lombok插件2.2、添加maven依赖 三、常用注解3.1、Getter / Setter3.2、ToString3.3、NoArgsConstructor / AllArgsConstructor3.4、EqualsAndHashCode3.5、Data3.6、Value3.7、Accessors3.7.1、Accessors(chain true)3.7.2、Ac…...
实时通信应用的开发:Vue.js、Spring Boot 和 WebSocket 整合实践
目录 1. 什么是webSocket 2. webSocket可以用来做什么? 3. webSocket协议 4. 服务器端 5. 客户端 6. 测试通讯 1. 什么是webSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务…...
【C++】C++异常
文章目录 1. C语言传统处理错误的方式2. C异常的概念3. 异常的使用3.1 异常的抛出和捕获3.2 异常的重新抛出3.3 异常安全3.4 异常规范 4. C标准库的异常体系5. 自定义的异常体系6. 异常的优缺点 1. C语言传统处理错误的方式 C语言传统的错误处理机制有两个: 终止程…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...
raid存储技术
1. 存储技术概念 数据存储架构是对数据存储方式、存储设备及相关组件的组织和规划,涵盖存储系统的布局、数据存储策略等,它明确数据如何存储、管理与访问,为数据的安全、高效使用提供支撑。 由计算机中一组存储设备、控制部件和管理信息调度的…...
shell脚本质数判断
shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数)shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数) 思路: 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...
标注工具核心架构分析——主窗口的图像显示
🏗️ 标注工具核心架构分析 📋 系统概述 主要有两个核心类,采用经典的 Scene-View 架构模式: 🎯 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 🔧 关键函数&…...
MeanFlow:何凯明新作,单步去噪图像生成新SOTA
1.简介 这篇文章介绍了一种名为MeanFlow的新型生成模型框架,旨在通过单步生成过程高效地将先验分布转换为数据分布。文章的核心创新在于引入了平均速度的概念,这一概念的引入使得模型能够通过单次函数评估完成从先验分布到数据分布的转换,显…...
