vue3+ts解决ios橡皮筋_vue3滑动橡皮筋问题-CSDN博客

本文链接：https://blog.csdn.net/wangshuaipiwa/article/details/130835378

本文介绍如何在Vue3项目中结合TypeScript解决iOS设备上输入框聚焦时出现的橡皮筋效果问题。通过设置移动端禁止缩放，使用ref获取元素，结合onMounted生命周期钩子和touch事件，实现当手指滑动距离达到一定阈值时隐藏键盘，从而消除橡皮筋效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要有一个大盒子里面包裹着子盒子两个盒子的颜色要一致

大盒子的高度要小于小盒子的高度 

 1. vh是屏幕的可视区高度 给大盒子一个fixed固定定位 让他可以滚动
 search-box {
  width: 100%;
  height: 100vh;
  position: fixed;
  overflow-y: auto;
}

小盒子的样式的高度一定要大于大盒子的高度
.search {
  width: 100%;
  //   减去75px 是因为上面的搜索框的高度 也就是说 100vh的可视区不包括 搜索框 
  height: calc(100vh - 75px);
  background-color: #fff;
}

移动端禁止缩放，在public/index.html中设置

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />

首先要先获取input框,先要引入ref 因为滑动页面要让键盘小时

import { ref } from 'vue'
const input = ref<HTMLInputElement>()

获取你所需要滚动的盒子

const searchPage = ref<HTMLDivElement>()

然后在页面加载完成以后执行以下内容,所以要先引入onMounted，先绑定一个ontouchstart事件，手指刚按下你所需要滑动盒子的时候执行FnStart里边的代码，然后先获取到手指刚开始按下的位置，然后手指移动的时候再执行FnMove里边代码，用手指滑动的位置 - 刚开始手指按下时获取的位置然后再判断一下是否 >= 1; 用Math.abs()取绝对值，让这个绝对值 >= 1 的时候让input框失去焦点
刚开始的时候往下滑不会滑动，因为刚开始的时候是下边滚动，上边的滚动值为0；所以要在刚开始的时候设置一个滚动的值；最后就解决了这个问题

import { onMounted } from 'vue'
 
interface iStart {
  startX: number
  x: number
}
 
const start: iStart = {
  startX: 0,
  x: 0
}
 
 //手指在整个页面滑动
const Fnmove = (ev: TouchEvent) => {
// pgey是事件距离顶部的高度  让滑动页面手指开始触摸的位置-去刚刚在滑动盒子触摸的位置
  start.x = ev.changedTouches[0].pageY - start.startX 
 // PageY进行取整以后然后当他大于1的时候让键盘消失
  if (Math.abs(start.x) >= 1) {
    input.value!.blur()
  }
}
 
 //开始触摸
const FnStart = (ev: TouchEvent) => {