So passen Sie Vue an die kleine Blackbox unter dem iOS-Handy an-Front-End-Fragen und Antworten-php.cn

So passen Sie Vue an die kleine Blackbox unter dem iOS-Handy an

PHPz

Freigeben： 2023-05-25 15:10:38

Original

745 Leute haben es durchsucht

Wenn im Vue-Projekt ein kleines schwarzes Kästchen auf einem iOS-Telefon erscheint, kann dies durch das Verschieben der Seite verursacht werden. Dieses kleine schwarze Kästchen erscheint normalerweise in Safari-Browsern unter iOS 12 und höher. Hier sind mehrere Lösungen.

Lösung

Option 1: Deaktivieren Sie das Verschieben von iOS-Seiten

Die Idee dieser Methode besteht darin, das Verschieben von Seiten zu verhindern, um das Erscheinen kleiner schwarzer Kästchen zu vermeiden. Dies kann auf folgende Weise erreicht werden:

Fügen Sie den folgenden Code zur Funktion mount auf der Seite hinzu, auf der das Problem gelöst werden muss: mounted函数中加入以下代码：

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

方案二：通过CSS解决

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

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

Nach dem Login kopieren

例如：

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

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

Nach dem Login kopieren

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

方案三：使用better-scroll

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

首先，安装better-scroll：

npm install better-scroll --save

Nach dem Login kopieren

然后在需要使用的页面中引入和初始化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>

Nach dem Login kopieren

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

Oder fügen Sie den folgenden Code zur App.vue hinzu Komponente:

rrreee

So wird es gemacht Der Effekt besteht darin, das Gleitereignis der Seite zu deaktivieren und das Problem der kleinen Blackbox zu lösen. Diese Methode wirkt sich jedoch auf die Gesamtsituation aus. Wenn einige Seiten verschoben werden müssen, ist für diese Seiten eine spezielle Verarbeitung erforderlich.

Option 2: Mit CSS lösen🎜🎜Die Verwendung von CSS zum Lösen ist ebenfalls eine relativ einfache Methode. Fügen Sie dem übergeordneten Container den folgenden Code hinzu: 🎜rrreee🎜Zum Beispiel: 🎜rrreee🎜Der -webkit-overflow-scrolling hier ist eine Eigenschaft in CSS, die zur Steuerung der Scrollmethode des Containers verwendet wird. Nach dem Hinzufügen wird der elastische Bildlaufeffekt von iOS aktiviert, um das Problem kleiner Blackboxes zu lösen. Dadurch ändert sich jedoch der Bildlaufeffekt der gesamten Seite. 🎜🎜Option 3: Better-Scroll verwenden🎜🎜Better-Scroll ist eine Bibliothek, die das Scroll-Problem auf dem mobilen Endgerät löst. Sie können diese Bibliothek verwenden, um das kleine Black-Box-Problem auf iOS zu lösen. 🎜🎜Installieren Sie zunächst better-scroll: 🎜rrreee🎜 Führen Sie dann better-scroll auf der Seite ein, die Sie verwenden möchten, und initialisieren Sie es: 🎜rrreee🎜 Hierbei ist zu beachten, dass die Initialisierung von better-scroll in der Komponente erfolgen muss montierte -Funktion, da sonst Probleme auftreten können. 🎜🎜Zusammenfassung🎜🎜Die oben genannten sind drei gängige Methoden zur Lösung des kleinen Black-Box-Problems in iOS. Das Deaktivieren des Seitenverschiebens unter iOS ist die einfachste Methode, wirkt sich jedoch auf die Gesamtsituation aus. Durch die Verwendung von CSS zur Problemlösung können globale Probleme vermieden werden. Wenn Sie in Ihrem Projekt schließlich Better-Scroll verwenden müssen, müssen Sie auf den Zeitpunkt der Initialisierung achten. 🎜

Das obige ist der detaillierte Inhalt vonSo passen Sie Vue an die kleine Blackbox unter dem iOS-Handy an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!