当前位置: 首页 > news >正文

微信小程序中键盘弹起输入框自动跳到键盘上方处理

效果展示

键盘未弹起时
在这里插入图片描述
键盘弹起后:
在这里插入图片描述

实现方式

话就不多说了 我直接贴代码了
原理就是用你点击的输入框的底部 距离顶部的位置 减去屏幕高度除以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事件的输入框会被展示在手机屏幕中间靠上的位置,而一般的键盘高度不会高于手机屏幕的一半,如果追求细节的话可以去改改那个计算公式就可以。

相关文章:

微信小程序中键盘弹起输入框自动跳到键盘上方处理

效果展示 键盘未弹起时 键盘弹起后&#xff1a; 实现方式 话就不多说了 我直接贴代码了 原理就是用你点击的输入框的底部 距离顶部的位置 减去屏幕高度除以2&#xff0c;然后设成负值&#xff0c;再将这个值给到最外层相对定位的盒子的top属性&#xff0c;这样就不会出现顶…...

excel将主信息和明细信息整理为多对多(每隔几行空白如何填充)

excel导出的数据是主信息和明细信息形式。 方法如下:1、首先&#xff0c;从第一个单元格开始选中要填充的数据区域。2、按CtrlG或者F5调出定位对话框&#xff0c;点击左下角的【定位条件】。3、在【定位条件】中选择【空值】&#xff0c;然后点击【确定】按钮。4、按照上述操作…...

卷积神经网络实现彩色图像分类 - P2

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f366; 参考文章&#xff1a;365天深度学习训练营-第P2周&#xff1a;彩色识别&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子…...

【博客694】k8s kubelet 状态更新机制

k8s kubelet 状态更新机制 场景&#xff1a; 当 Kubernetes 中 Node 节点出现状态异常的情况下&#xff0c;节点上的 Pod 会被重新调度到其他节点上去&#xff0c;但是有的时候我们会发现节点 Down 掉以后&#xff0c;Pod 并不会立即触发重新调度&#xff0c;这实际上就是和 K…...

【博客692】grafana如何解决step动态变化时可能出现range duration小于step

grafana如何解决step动态变化时可能出现range duration小于step 1、grafana中的step和resolution grafana中的 “step” grafana本身是没有提供step参数的&#xff0c;因为仪表盘根据查询数据区间以及仪表盘线条宽度等&#xff0c;对于不同查询&#xff0c;相同的step并不能…...

eNSP:ibgp的破水平切割练习

实验要求&#xff1a; 拓扑展示&#xff1a; 命令操作&#xff1a; R1&#xff1a; <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&#xff1f; 1.2.maven的核心功能是什么&#xff1f; 2.Maven安装配置 2.1Maven的安装 2.2Maven环境配置 1.配置 MAVEN_HOME &#xff0c;变量值就是你的 maven 安装的路径&#xff08;bin 目录之前一级目录&#xff09; 2.将MAVEN_HOME 添加到Path系…...

基于长短期神经网络LSTM的多分类代码

目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 基于长短期神经网络LSTM的股票预测 MATALB编程实现,附有代码:基于长短期神经网络LSTM的多分类代码,基于LSTM的多分类预测-深度学习文档类资源-CSDN文库 https://download.csdn.net/download/abc991835105/88184779 效果图 结果…...

利用爬虫爬取图片并保存

1 问题 在工作中&#xff0c;有时会遇到需要相当多的图片资源&#xff0c;可是如何才能在短时间内获得大量的图片资源呢&#xff1f; 2 方法 我们知道&#xff0c;网页中每一张图片都是一个连接&#xff0c;所以我们提出利用爬虫爬取网页图片并下载保存下来。 首先通过网络搜索…...

设计模式之Bridge模式的C++实现

目录 1、Bridge模式的提出 2、Bridge模式的定义 3、Bridge模式总结 4、需求描述 5、多继承方式实现 6、使用Bridge设计模式实现 1、Bridge模式的提出 在软件功能模块设计中&#xff0c;如果类的实现功能划分不清晰&#xff0c;使得继承得到的子类往往是随着需求的变化&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父宽度自适应子控件的宽度

需求&#xff1a; 控件随着金币进行自适应宽度 image.png 步骤&#xff1a; 1、Container不设置宽度&#xff0c;需要设置约束padding&#xff1b; 2、文本使用Flexible形式&#xff1b; Container(height: 24.dp,padding: EdgeInsetsDirectional.only(start: 8.dp, end: 5.d…...

什么是 API 安全?学习如何防止攻击和保护数据

随着 API 技术的普及&#xff0c;API 安全成为了一个越来越重要的问题。本文将介绍什么是 API 安全&#xff0c;以及目前 API 面临的安全问题和相应的解决方案。 什么是 API 安全 API 安全是指保护 API 免受恶意攻击和滥用的安全措施。API 安全通常包括以下几个方面&#xff1…...

简述 TCP 和 UDP 的区别以及优缺点和使用场景?

一、TCP与UDP区别总结&#xff1a; 1、TCP面向连接&#xff08;如打电话要先拨号建立连接&#xff09;;UDP是无连接的&#xff0c;即发送数据之前不需要建立连接 2、TCP提供可靠的服务。也就是说&#xff0c;通过TCP连接传送的数据&#xff0c;无差错&#xff0c;不丢失&…...

react进阶

react-virtualized的高阶组件&#xff0c;Autosize可以使屏幕适配。使用render-props模式来获取到AutoSizer组件暴露的width和height属性。JSON.parse(JSON.stringify())不适用于有undefined的数据。 深拷贝的使用&#xff0c;不能使用在有undefined的数据中。有直接过滤undefi…...

使用windows搭建WebDAV服务,并内网穿透公网访问【无公网IP】

文章目录 1. 安装IIS必要WebDav组件2. 客户端测试3. 使用cpolar内网穿透&#xff0c;将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模板

做了一个科技感的后台管理系统登录页设计&#xff0c;并且尝试用响应式布局把前端html写了出来&#xff0c;发现并没有现象中的那么容易&#xff0c;chrome等标准浏览器都显示的挺好&#xff0c;但IE11下面却出现了很多错位&#xff0c;兼容起来还是挺费劲的&#xff0c;真心不…...

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使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务…...

【C++】C++异常

文章目录 1. C语言传统处理错误的方式2. C异常的概念3. 异常的使用3.1 异常的抛出和捕获3.2 异常的重新抛出3.3 异常安全3.4 异常规范 4. C标准库的异常体系5. 自定义的异常体系6. 异常的优缺点 1. C语言传统处理错误的方式 C语言传统的错误处理机制有两个&#xff1a; 终止程…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...