vueをiOS携帯電話の下の小さなブラックボックスに適応させる方法

Vue プロジェクトで、iOS スマートフォンに小さな黒いボックスが表示される場合は、ページのスライドが原因である可能性があります。この小さなブラック ボックスは通常、iOS 12 以降の Safari ブラウザに表示されます。ここではいくつかの解決策を紹介します。

解決策

オプション 1: iOS ページ スライドを無効にする

この方法のアイデアは、小さなブラック ボックスの出現を避けるためにページ スライドを禁止することです。これは、次の方法で実現できます。

問題を解決する必要があるページの 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>

これの効果は、ページのスライド イベントを無効にし、小さなブラック ボックスの問題を解決することです。ただし、この方法は全体の状況に影響するため、一部のページをスライドさせる必要がある場合、そのページに対して特別な処理が必要になります。

オプション 2: 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 の弾性スクロール効果が有効になり、小さなブラック ボックスの問題は解決されますが、ページ全体のスクロール効果が変化します。

オプション 3: 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>

ここで注意する必要があるのは、より良い - スクロールの初期化はコンポーネントの mounted 関数で完了する必要があります。そうしないと問題が発生する可能性があります。

概要

上記は、iOS の小さなブラック ボックスの問題を解決するための 3 つの一般的な方法です。 iOS のページ スライドを無効にするのが最も簡単な方法ですが、全体的な状況に影響します。 CSS を使用して問題を解決すると、グローバルな問題を回避できます。最後に、プロジェクトで better-scroll を使用する必要がある場合は、初期化のタイミングに注意する必要があります。

以上がvueをiOS携帯電話の下の小さなブラックボックスに適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。