vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离

news2024/12/24 2:00:43

vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离

input获取焦点计算上推页面距离

  • 1.先说我这边的需求
  • 2.发现问题
  • 3.解决思路
  • 4.代码展示

自我记录

1.先说我这边的需求

需求

1.给键盘同级添加一个按钮例如’下一步’ or ‘确认’ 这种按钮
2.初步想法就是获取input焦点时拿到键盘高度,并给页面的按钮设置fixed,并且bottom为键盘的高度正常逻辑是没问题的!
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.发现问题

发现问题:

1.当页面input在底部时(可以理解为键盘弹出时的高度会覆盖掉页面底部的input时)因为input有自动上推的属性adjustPosition,此时整个页面就会被上推至显示当前的input位置,重点是整个页面!!!
2/因为我们的按钮是根据页面去定位的,当整个页面被上推,即使按钮定位的bottom为键盘的高度也会导致按钮没有和键盘贴在一起

3.解决思路

1.查看文档是否有能获取到上推距离的属性or方法 ×
2.通过ref去获取input的target相关 ×
3.通过uni.createSelectorQuery() 获取input的target相关
3.1获取到input的底边距离屏幕顶部的距离 - 键盘高度的定位按钮的底边距离屏幕顶部的距离 = 上推距离

直接上代码

4.代码展示

<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue'
//  监听键盘高度变化
const keyboardHeight = ref(0)
// 当前键盘类型
const keyboardType = ref('')
// 下一步
const nextText = ref('下一步')
const isNext = ref(false)

const onInputFocus = (event: UniHelper.InputOnFocusEvent, type: string) => {
  // 获取键盘高度
  keyboardHeight.value = Math.ceil(event.detail.height || 0)
  keyboardType.value = type

  if (['wage', 'fund', 'socialSecurity'].includes(type)) {
    nextText.value = '确定'
  } else {
    nextText.value = '下一步'
  }
  handleKeyboardOpen(type)
}

// 失去焦点触发
const onInputBlur: UniHelper.InputOnBlur = () => {
  if (isNext.value) return (isNext.value = false)
  keyboardHeight.value = 0
  keyboardType.value = ''
}
// 下一步触发
const onNextConfirm = (event: UniHelper.CustomEvent, type: string) => {
  isNext.value = true
  event.stopPropagation()
  if (type === 'name') {
    idCardInput.value = true
  } else if (type === 'idCard') {
    phoneInput.value = true
  } else if (['phone', 'wage', 'fund', 'socialSecurity'].includes(type)) {
    idCardInput.value = false
    phoneInput.value = false
    nameInput.value = false
    isNext.value = false
  }
}
// 主要逻辑相关!!!
//1、首先导入当前组件的实例 form 'vue'
var currentInstance = getCurrentInstance()
// 键盘弹出时计算推上去的距离
const handleKeyboardOpen = (type: string) => {
  // 使用 inputQuery 获取输入框 & 按钮位置
  //2、添加上in方法
  const inputQuery = uni.createSelectorQuery().in(currentInstance)
  const ButtonQuery = uni.createSelectorQuery().in(currentInstance)
  let rectBottom = 0
  let rectBottom2 = 0
  // 获取输入框
  inputQuery
    .select(`#${type}`)
    .boundingClientRect((rect: any) => {
      console.log(rect, 'rect')
      rectBottom = rect.bottom
    })
    .exec()
  // 获取按钮位置
  setTimeout(() => {
    ButtonQuery.select(`#next`)
      .boundingClientRect((rect: any) => {
        // rect 包含了按钮的位置信息
        rectBottom2 = rectBottom - rect.bottom
        // >0 证明 上推页面了 !=0 证明获取到按钮信息了
        if (rectBottom2 > 0 && rect.bottom !== 0) {
          keyboardHeight.value = keyboardHeight.value - rectBottom2
        }
      })
      .exec()
  })
}
</script>
<template>
 <input
  id="fund"
  class="input"
  focus
  type="digit"
  placeholder="请输入"
  placeholder-style="font-size:28rpx"
  v-model="formInfo.fundVal"
  @focus="onInputFocus($event, 'fund')"
  @blur="onInputBlur"
/>

<input
id="socialSecurity"
class="input"
type="digit"
focus
placeholder="请输入"
placeholder-style="font-size:28rpx"
v-model="formInfo.socialSecurityVal"
@focus="onInputFocus($event, 'socialSecurity')"
@blur="onInputBlur"
/>

<input
 id="wage"
  class="input"
  type="digit"
  placeholder="请输入签约工资"
  v-model="formBottomInfo.wage"
  @focus="onInputFocus($event, 'wage')"
  @blur="onInputBlur"
/>
 <!-- 下一步 -->
 <view
   id="next"
   class="nextKey"
   :style="{ bottom: keyboardHeight + 'px', display: keyboardHeight ? 'block' : 'none' }"
   @tap.stop="onNextConfirm($event, keyboardType)"
   >{{ nextText }}</view
 >
</template>
<style lang="scss" scoped>
  .nextKey {
    position: fixed;
    bottom: 0;
    right: 0;
    display: none;
    width: 140rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    border-radius: 8rpx;
    font-size: 28rpx;
    background-color: #42b983;
  }
</style>

整理不易,如有转载请备注原文地址!

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

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

相关文章

Flink---1、概述、快速上手

1、Flink概述 1.1 Flink是什么 Flink的官网主页地址&#xff1a;https://flink.apache.org/ Flink的核心目标是“数据流上有状态的计算”(Stateful Computations over Data Streams)。 具体说明&#xff1a;Apache Flink是一个“框架和分布式处理引擎”&#xff0c;用于对无界…

2023年轨道交通行业研究报告

第一章 行业概况 1.1 定义和分类 在全球行业分类标准&#xff08;GICS&#xff09;的框架下&#xff0c;轨道交通行业被精准地划定为交通运输行业的一个重要子集&#xff0c;其主要职责是专注于沿着预设轨道路线进行乘客和货物运输的系统的设计、实施、维护以及管理。这个行业…

C# 采用3DES-MAC进行签名 base64解码与编码

** 3DES-MAC ** 3DES-MAC&#xff08;Triple Data Encryption Standard Message Authentication Code&#xff09;是一种消息认证码&#xff08;MAC&#xff09;算法&#xff0c;用于验证消息的完整性和真实性。3DES-MAC使用了3DES&#xff08;Triple Data Encryption Standa…

java八股文面试[JVM]——JVM性能优化

JVM性能优化指南 JVM常用命令 jps 查看java进程 The jps command lists the instrumented Java HotSpot VMs on the target system. The command is limited to reporting information on JVMs for which it has the access permissions. jinfo &#xff08;1&#xff09;实时…

第三章微服务配置中心

文章目录 Nacos配置中心统一配置管理在nacos中添加配置文件从微服务拉取配置 配置热更新多环境共享配置 搭建Nacos集群搭建集群初始化数据库配置Nacos启动nginx反向代理 Nacos配置中心 Nacos配置管理 Nacos除了可以做注册中心&#xff0c;同样可以做配置管理来使用。 统一配置…

Vue生成多文件pdf准考证

这是渲染的数据 这是生成的pdf文件&#xff0c;直接可以打印 需要安装和npm依赖和引入封装的pdf.js文件 npm install --save html2canvas // 页面转图片 npm install jspdf --save // 图片转pdfpdf.js文件 import html2canvas from "html2canvas"; import jsPDF …

容器编排工具的比较:Kubernetes、Docker Swarm、Nomad

随着容器化技术的普及&#xff0c;容器编排工具成为了现代应用部署和管理的重要组成部分。容器编排工具能够自动化容器的部署、扩展和管理&#xff0c;从而提高应用的可靠性和可伸缩性。在众多的容器编排工具中&#xff0c;Kubernetes、Docker Swarm和Nomad是三个备受关注的主要…

三维跨孔电磁波CT数据可视化框架搭建

三维跨孔电磁波CT数据可视化框架搭建 文章目录 三维跨孔电磁波CT数据可视化框架搭建1、三维CT可视化结果2、matlab代码2.1、CT数据格式整理并保存2.2、三维可视化 利用matlab实现对跨孔电磁波CT实测数据反演&#xff0c;并搭建了三维CT数据可视化框架&#xff0c;可装填实测CT反…

2023-09-04 LeetCode每日一题(序列化和反序列化二叉搜索树)

2023-09-04每日一题 一、题目编号 449. 序列化和反序列化二叉搜索树二、题目链接 点击跳转到题目位置 三、题目描述 序列化是将数据结构或对象转换为一系列位的过程&#xff0c;以便它可以存储在文件或内存缓冲区中&#xff0c;或通过网络连接链路传输&#xff0c;以便稍后…

Qt--自定义搜索控件,QLineEdit带前缀图标

写在前面 这里自定义一个搜索控件&#xff0c;通过自定义LineEdit的textChange信号&#xff0c;搜索指定内容&#xff0c;并以QCheckBox的方式显示在QListWidget中。 开发版本 Qt: 5.15.2 Qt: Creator10.0.2 编译环境&#xff1a;msvc2019_64bit release 效果 代码 自定义…

使用 Sealos 在离线环境中光速安装 K8s 集群

作者&#xff1a;尹珉。Sealos 开源社区 Ambassador&#xff0c;云原生爱好者。 当容器化交付遇上离线环境 在当今快节奏的软件交付环境中&#xff0c;容器化交付已经成为许多企业选择的首选技术手段。在可以访问公网的环境下&#xff0c;容器化交付不仅能够提高软件开发和交付…

【ccf-csp题解】第0次csp认证-第四题-有趣的数-题解

题目描述 思路说明 本题涉及组合数学的知识 目的是在n个空位上放置0、1、2、3&#xff0c;问符合题意的放法有多少种 首先注意到一个重要的事实&#xff1a; 只要0和1的位置已经确定&#xff0c;那么2和3的摆放就十分容易了 那么把所有情况分为n-2种&#xff1a; 第一种…

uniapp开发 众筹平台源码 高仿水滴筹平台源码 大病救助平台源码 可二开

uniapp开发 众筹平台源码 高仿水滴筹平台源码 大病救助平台源码 可二开

Calico IP In IP模拟组网

Calico IP In IP模拟组网 网络架构 模拟组网 先在k8s-master-1节点执行如下命令&#xff1a; # 创建veth-pair设备对ip link add veth1 type veth peer name eth0# 创建ns1网络命名空间ip netns add ns1# 将eth0网卡插入ns1网络命名空间ip link set eth0 netns ns1# 为ns1网…

GUIslice Builder 安装及使用

GUIslice Builder是一个可视化UI设计工具&#xff0c;可以简化GUIslice的UI设计流程。下面是GUIslice Builder的安装和使用步骤&#xff1a; 首先&#xff0c;下载GUIslice Builder并解压缩文件。 然后&#xff0c;进入解压后的文件夹&#xff0c;并运行GUIsliceBuilder.exe。…

PCL入门(一):ubuntu20使用apt安装pcl

目录 0. 背景1. apt安装的版本2. 更新apt源3. apt安装命令4. 测试 0. 背景 使用源码安装pcl较为麻烦&#xff0c;因为存在依赖库vtk&#xff0c;flann&#xff0c;boost&#xff0c;eigen等&#xff0c;都不太好安装&#xff0c;因此采用apt方式安装。 下面内容主要参考博客《…

深入浅出Android同步屏障机制

原文链接 Android Sync Barrier机制 诡异的假死问题 前段时间&#xff0c;项目上遇到了一个假死问题&#xff0c;随机出现&#xff0c;无固定复现规律&#xff0c;大量频繁随机操作后&#xff0c;便会出现假死&#xff0c;整个应用无法操作&#xff0c;不会响应事件&#xff…

第一章初识微服务

文章目录 认识微服务单体架构分布式架构需要考虑的问题 微服务微服务的具体架构微服务技术对比企业中的技术需求 总结 服务拆分注意事项 认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。…

优化Docker权限管理:配置Docker用户组

Docker 利用 Linux 的用户和组权限来管理对 Docker 守护进程的访问权限。一般情况下&#xff0c;只有 root 用户和属于 docker 用户组的用户才被允许访问 Docker 守护进程。在 Linux 系统上使用 Docker 时&#xff0c;如果您尚未配置 docker 用户组&#xff0c;那么作为非 root…

Apache Linkis 与 OceanBase 集成:实现数据分析速度提升

导语&#xff1a;恭喜 OceanBase 生态全景图中又添一员&#xff0c;Apache Linkis 构建了一个计算中间件层&#xff0c;以促进上层应用程序和底层数据引擎之间的连接、治理和编排。 近日&#xff0c;计算中间件 Apache Linkis 在其新版本中通过数据源功能&#xff0c;支持用户通…