iOS 휴대폰 아래 작은 블랙박스에 vue를 적용하는 방법-프런트엔드 Q&A-php.cn

iOS 휴대폰 아래 작은 블랙박스에 vue를 적용하는 방법

PHPz

풀어 주다： 2023-05-25 15:10:38

원래의

742명이 탐색했습니다.

Vue 프로젝트에서 iOS 폰에 작은 검은색 상자가 나타나는 경우 페이지 슬라이딩으로 인한 것일 수 있습니다. 이 작은 검은색 상자는 일반적으로 iOS 12 이상의 Safari 브라우저에 나타납니다. 다음은 몇 가지 솔루션입니다.

해결 방법

옵션 1: iOS 페이지 슬라이딩 비활성화

이 방법의 아이디어는 페이지 슬라이딩을 금지하여 작은 검은색 상자가 나타나는 것을 방지하는 것입니다. 이는 다음과 같은 방법으로 달성할 수 있습니다.

문제를 해결해야 하는 페이지의 mounted 함수에 다음 코드를 추가합니다. mounted函数中加入以下代码：

document.body.addEventListener('touchmove', (e) => {
      e.preventDefault();
}, { passive: false });

로그인 후 복사

或者在App.vue组件中加入以下代码：

<script>
    export default {
        mounted() {
            document.body.addEventListener('touchmove', (e) => {
              e.preventDefault();
            }, { passive: false });
        }
    }
</script>

로그인 후 복사

这样做的效果是将页面的滑动事件禁止掉，解决了小黑框问题。但是，这种方法会影响到全局，如果有些页面需要滑动，则需要对这些页面做特殊处理。

方案二：通过CSS解决

使用CSS来解决也是一种比较简单的方法。在父级容器中加入以下代码：

-webkit-overflow-scrolling: touch;
overflow-y: scroll;

로그인 후 복사

例如：

<div class="wrapper">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

<style>
.wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
</style>

로그인 후 복사

这里的-webkit-overflow-scrolling是CSS中的一个属性，用于控制容器的滚动方式。加上后会启用iOS的弹性滚动效果，解决小黑框问题，但是会导致整个页面的滚动效果变化。

方案三：使用better-scroll

better-scroll是一款解决移动端滚动问题的库，可以通过该库来解决iOS上的小黑框问题。

首先，安装better-scroll：

npm install better-scroll --save

로그인 후 복사

然后在需要使用的页面中引入和初始化better-scroll即可：

<template>
  <div>
      <div ref="wrapper">
          <!--内容-->
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: 3,
      click: true
    })
  }
}
</script>

로그인 후 복사

这里需要注意的是，better-scroll的初始化需要在组件的mountedrrreee

또는 App.vue에 다음 코드를 추가합니다. 컴포넌트:

rrreee

이렇게 됩니다. 페이지의 슬라이딩 이벤트를 비활성화하고 작은 블랙박스 문제를 해결하는 효과가 있습니다. 그러나 이 방법은 전체 상황에 영향을 미칩니다. 일부 페이지를 밀어야 하는 경우 해당 페이지에 특별한 처리가 필요합니다.

옵션 2: CSS를 통해 해결🎜🎜CSS를 사용하여 해결하는 것도 비교적 간단한 방법입니다. 상위 컨테이너에 다음 코드를 추가합니다. 🎜rrreee🎜예: 🎜rrreee🎜여기서 -webkit-overflow-scrolling은 컨테이너의 스크롤 방법을 제어하는 데 사용되는 CSS의 속성입니다. 추가 후 iOS의 탄력적인 스크롤 효과가 활성화되어 작은 블랙박스 문제를 해결하게 되지만, 전체 페이지의 스크롤 효과가 변경되게 됩니다. 🎜🎜옵션 3: better-scroll 사용🎜🎜better-scroll은 모바일 단말기의 스크롤 문제를 해결하는 라이브러리입니다. 이 라이브러리를 사용하여 iOS의 작은 블랙박스 문제를 해결할 수 있습니다. 🎜🎜먼저 better-scroll을 설치하세요: 🎜rrreee🎜 그런 다음 사용해야 하는 페이지에 better-scroll을 소개하고 초기화하세요: 🎜rrreee🎜 여기서 주목해야 할 점은 better-scroll의 초기화가 구성 요소의 마운트된 함수를 사용하지 않으면 문제가 발생할 수 있습니다. 🎜🎜요약🎜🎜위는 iOS에서 작은 블랙박스 문제를 해결하는 일반적인 세 가지 방법입니다. iOS 페이지 슬라이딩을 비활성화하는 것이 가장 간단한 방법이지만 전반적인 상황에 영향을 미칩니다. CSS를 사용하여 문제를 해결하면 글로벌 문제를 피할 수 있습니다. 마지막으로 프로젝트에서 better-scroll을 사용해야 한다면 초기화 시점에 주의해야 합니다. 🎜

위 내용은 iOS 휴대폰 아래 작은 블랙박스에 vue를 적용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!