모바일 ios 키보드 팝업 후 보이는 영역 스크롤 문제 해결

이 문제는 vue2 프로젝트에 적합한 모바일 터미널 ios 최적화 문제에 속해야 합니다.

문제가 발생

• 검색 인터페이스에서 검색 상자를 클릭하면 ios 키보드가 팝업되고 보이는 영역의 원래 높이가 변경되지 않고 스크롤이 수행됩니다(ios 문제, Android 인터페이스에는 문제 없음)
• ios 고무줄 효과
• 검색창 위치 고정을 위해 스크롤 금지
• 검색창이 포커스를 잃기 때문에 인터페이스가 스크롤되면 검색창이 고정되고 검색된 부분만 스크롤이 가능합니다.
• 검색 상자는 vant에서 장면을 검색하는 데 사용되는 입력 상자 구성 요소입니다.

문제 해결됨

이 문제를 해결함에 있어 가시 영역의 높이를 수정하여 이 문제를 해결하지 못함

슬라이딩을 금지하는 이벤트 수신

다음과 같이 정의되는 세 가지 모바일 터치 이벤트가 있습니다.

1. touchstart ：手指放在一个DOM元素上。
2. touchmove ：手指拖曳一个DOM元素。
3. touchend ：手指从一个DOM元素上移开。
复制代码

touchmove 이벤트 속도는 구현에 따라 정의되며 하드웨어 기능 및 기타 구현 세부 정보에 따라 다릅니다.

preventDefault 동일한 터치 포인트에서 스크롤과 같은 모든 기본 동작을 방지하는 메서드입니다.

이를 통해 해결책을 찾아내는데, 모니터링  touchmove을 통해 스와이프가 필요한 곳은 미끄럽게 하고, 미끄럽지 않은 곳은 미끄럽게 하지 않도록 한다.

구현은 다음과 같습니다.

document.body.addEventListener('touchmove', function(e) {
    if(e._isScroller) return;
    // 阻止默认事件
    e.preventDefault();
}, {
    passive: false
});
复制代码

특정 솔루션

검색 상자에 포커스가 있을 때 touchmove이벤트 트리거

검색창이 포커스를 잃으면 touchmove이벤트 제거

리스너를 설정하고 리스너를 제거할 때 동일한 이벤트가 필요하기 때문에 이벤트를 추출하고 별도의 메소드를 작성해야 합니다.

focus() {
  document.body.addEventListener("touchmove", this.stop, {
    passive: false,
  }); // passive 参数不能省略，用来兼容ios和android
},
blur() {
  document.body.removeEventListener("touchmove", this.stop, {
    passive: false,
  });
},
stop(e) {
  e.preventDefault(); // 阻止默认的处理方式(阻止下拉滑动的效果)
},
复制代码