Comment adapter vue à la petite boîte noire sous le téléphone mobile iOS-Questions et réponses frontales-php.cn

Comment adapter vue à la petite boîte noire sous le téléphone mobile iOS

PHPz

Libérer： 2023-05-25 15:10:38

original

746 Les gens l'ont consulté

Dans le projet Vue, si une petite boîte noire apparaît sur un téléphone iOS, cela peut être dû à un glissement de page. Cette petite boîte noire apparaît généralement dans les navigateurs Safari sur iOS 12 et versions ultérieures. Voici plusieurs solutions.

Solution

Option 1 : Désactiver le glissement de page iOS

L'idée decette méthode est d'interdire le glissement de page pour éviter l'apparition de petites boîtes noires. Ceci peut être réalisé des manières suivantes :

Ajoutez le code suivant à la fonction Mounted sur la page où le problème doit être résolu : mounted函数中加入以下代码：

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

Copier après la connexion

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

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

Copier après la connexion

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

方案二：通过CSS解决

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

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

Copier après la connexion

例如：

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

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

Copier après la connexion

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

方案三：使用better-scroll

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

首先，安装better-scroll：

npm install better-scroll --save

Copier après la connexion

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

Copier après la connexion

这里需要注意的是，better-scroll的初始化需要在组件的mountedrrreee#🎜 🎜# ou dans App.vue Ajoutez le code suivant au composant :

rrreee

L'effet de ceci est de désactiver l'événement glissant de la page et de résoudre le problème de la petite boîte noire. Cependant, cette méthode affectera la situation globale. Si certaines pages doivent être glissées, un traitement spécial sera nécessaire pour ces pages.

Option 2 : Résoudre via CSS

#🎜🎜#Utiliser CSS pour résoudre est également une méthode relativement simple. Ajoutez le code suivant au conteneur parent : #🎜🎜#rrreee#🎜🎜#Par exemple : #🎜🎜#rrreee#🎜🎜#Le -webkit-overflow-scrolling ici est une propriété en CSS , utilisé pour contrôler le mode de défilement du conteneur. Après l'avoir ajouté, l'effet de défilement élastique d'iOS sera activé pour résoudre le problème des petites boîtes noires, mais cela entraînera une modification de l'effet de défilement de la page entière. #🎜🎜##🎜🎜#Option 3 : Utiliser better-scroll#🎜🎜##🎜🎜#better-scroll est une bibliothèque qui résout le problème de défilement mobile Vous pouvez utiliser cette bibliothèque pour résoudre le problème de la petite boîte noire sur iOS. . #🎜🎜##🎜🎜#Tout d'abord, installez better-scroll : #🎜🎜#rrreee#🎜🎜# Ensuite, introduisez et initialisez better-scroll dans la page que vous devez utiliser : #🎜🎜#rrreee#🎜🎜#here It Il convient de noter que l'initialisation de better-scroll doit être complétée dans la fonction Mounted du composant, sinon des problèmes pourraient survenir. #🎜🎜##🎜🎜#Résumé#🎜🎜##🎜🎜#Voici trois méthodes courantes pour résoudre le problème de la petite boîte noire dans iOS. La désactivation du glissement de page iOS est la méthode la plus simple, mais elle affectera la situation globale. Utiliser CSS pour résoudre des problèmes peut éviter des problèmes globaux. Enfin, si vous devez utiliser better-scroll dans votre projet, vous devez faire attention au moment de l'initialisation. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!