Bagaimana untuk menyesuaikan vue ke kotak hitam kecil di bawah telefon bimbit ios

Dalam projek Vue, jika kotak hitam kecil muncul pada telefon iOS, ia mungkin disebabkan oleh gelongsor halaman. Kotak hitam kecil ini biasanya muncul dalam penyemak imbas Safari pada iOS 12 dan ke atas. Berikut adalah beberapa penyelesaian.

Penyelesaian

Pilihan 1: Lumpuhkan gelongsor halaman iOS

Idea kaedah ini adalah untuk melarang halaman gelongsor untuk mengelakkan kemunculan kotak hitam kecil. Ini boleh dicapai dengan cara berikut:

Tambahkan kod berikut pada fungsi mounted dalam halaman yang masalahnya perlu diselesaikan:

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

atau tambah kod berikut pada Komponen App.vue:

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

Kesannya ialah untuk melumpuhkan acara gelongsor halaman dan menyelesaikan masalah kotak hitam kecil. Walau bagaimanapun, kaedah ini akan menjejaskan keadaan keseluruhan Jika beberapa halaman perlu diluncurkan, pemprosesan khas akan diperlukan untuk halaman ini.

Pilihan 2: Selesaikan melalui CSS

Menggunakan CSS untuk menyelesaikan juga merupakan kaedah yang agak mudah. Tambahkan kod berikut pada bekas induk:

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

Contohnya:

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

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

-webkit-overflow-scrolling di sini ialah sifat dalam CSS yang digunakan untuk mengawal mod tatal bekas. Selepas menambahkannya, kesan tatal elastik iOS akan didayakan untuk menyelesaikan masalah kotak hitam kecil, tetapi ia akan menyebabkan kesan tatal keseluruhan halaman berubah.

Pilihan 3: Gunakan tatal yang lebih baik

tatal yang lebih baik ialah perpustakaan yang menyelesaikan masalah tatal pada bahagian mudah alih Anda boleh menggunakan pustaka ini untuk menyelesaikan masalah kotak hitam kecil pada iOS.

Mula-mula, pasang better-scroll:

npm install better-scroll --save

Kemudian perkenalkan dan mulakan lebih baik-scroll dalam halaman yang anda perlu gunakan:

<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>

Apa yang perlu diperhatikan di sini ialah lebih baik -Pengamatan tatal perlu dilengkapkan dalam fungsi mounted komponen, jika tidak masalah mungkin berlaku.

Ringkasan

Di atas ialah tiga kaedah biasa untuk menyelesaikan masalah kotak hitam kecil dalam iOS. Melumpuhkan gelongsor halaman iOS ialah kaedah paling mudah, tetapi ia akan menjejaskan keadaan keseluruhan. Menggunakan CSS untuk menyelesaikan masalah boleh mengelakkan masalah global. Akhir sekali, jika anda perlu menggunakan tatal yang lebih baik dalam projek anda, anda perlu memberi perhatian kepada masa permulaan.

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan vue ke kotak hitam kecil di bawah telefon bimbit ios. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!