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

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

自我记录

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 = '确定'
  }