v3+ts solves the rubber band problem on the mobile terminal and the disappearance of the soft keyboard on the sliding page

First of all, there must be two large boxes on the page, and the background colors of the boxes inside are all set to be the same

Height: 100vh; weight: 100% must be set on the parent’s box, and there is also fixed positioning, which can only be solved if it is this layout, for example:

.searchL {
  width: 100%;
  height: 100vh;
  position: fixed;
  overflow-y: auto;
  background-color: #fff;
}

The height set in the sub-level box must be extended a little

.search {
  width: 100%;
  height: calc(100vh + 5px);
  background-color: #fff;
}

Zooming is prohibited on the mobile terminal, set in 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" />< /pre>
<p>First of all, you must first get the input box, and you must first introduce ref</p>
<pre>import { ref } from 'vue'
const input = ref<HTMLInputElement>()

The whole page scrolls so you need to get the whole page first

const searchPage = ref<HTMLDivElement>()

Then execute the following content after the page is loaded, so first introduce onMounted, first bind an ontouchstart event, execute the code in FnStart when the finger is just pressed, and then get the position where the finger was just pressed, and then move the finger Then execute the code in FnMove, use the position where the finger slides – the position obtained when the finger is pressed at the beginning, and then judge whether it is >= 1; use Math.abs() to take the absolute value, so that the absolute value >= 1 When the input box loses focus

Sliding down at the beginning will not slide, because at the beginning it is scrolling at the bottom, and the scrolling value at the top is 0; so you need to set a scrolling value at the beginning; finally this problem is solved

code show as below:

import { onMounted } from 'vue'

interface iStart {
  startX: number
  x: number
}

const start: iStart = {
  startX: 0,
  x: 0
}

const Fnmove = (ev: TouchEvent) => {
  start.x = ev.changedTouches[0].pageY - start.startX
  if (Math.abs(start.x) >= 1) {
    input.value!.blur()
  }
}

const FnStart = (ev: TouchEvent) => {
  start.startX = ev.changedTouches[0].pageY
  searchPage.value!.scrollTop = 2
  document.ontouchmove = Fnmove
}

onMounted(() => {
  searchPage.value!.ontouchstart = FnStart
})

The complete code of the page is as follows: