Comment désactiver le défilement par défaut dans Uniapp

Dans le développement mobile, nous rencontrons souvent le besoin de désactiver le défilement par défaut. Par exemple, lorsque vous utilisez Uniapp pour développer un petit programme, vous devrez peut-être interdire le défilement par défaut de la page dans certains scénarios. Dans ce cas, nous devons utiliser certaines méthodes fournies par Uniapp pour y parvenir.

Tout d'abord, nous devons comprendre que dans uniapp, la page prend en charge le défilement par défaut. Par conséquent, si nous voulons désactiver le défilement par défaut, nous devons utiliser quelques astuces.

Méthode 1 : En définissant le style du conteneur externe

Nous pouvons désactiver le défilement par défaut de la page en définissant le style du conteneur externe. Les étapes spécifiques sont les suivantes :

1. Définissez un conteneur externe sur la page, tel qu'une balise div.
2. Définissez les styles pour le conteneur extérieur, y compris le débordement : caché.
3. Dans la zone de la page où le défilement doit être désactivé, comme une balise div, définissez le style, overflow-y: scroll;.

Exemple de code :

<template>
  <div class="wrapper">
    <div class="content" style="overflow-y: scroll;">
      <!--此处为需要设置滚动的内容区域-->
    </div>
  </div>
</template>

<style>
  .wrapper {
    overflow: hidden;
  }
</style>

Grâce à la méthode ci-dessus, nous pouvons obtenir l'effet de désactiver le défilement par défaut de la page.

Méthode 2 : implémentée via le code JS

Si la structure de la page est complexe ou si le défilement doit être contrôlé dans certains scénarios spécifiques, nous pouvons utiliser le code JS pour obtenir l'effet de désactiver le défilement.

Les étapes spécifiques sont les suivantes :

1. Récupérez les éléments de la page qui doivent être désactivés, comme un conteneur défilant.
2. Liez les événements touchstart, touchmove, touchend et empêchez les événements par défaut dans la fonction de gestion des événements.

Exemple de code :

<script>
  export default {
    methods: {
      stopScroll() {
        let el = document.querySelector('.content');
        let startY;
        el.addEventListener('touchstart', (e) => {
          startY = e.touches[0].pageY;
        });
        el.addEventListener('touchmove', (e) => {
          let moveY = e.touches[0].pageY - startY;
          if (el.scrollTop === 0 && moveY > 0) {
            e.preventDefault();
          }
          if (el.scrollTop >= el.scrollHeight - el.offsetHeight && moveY < 0) {
            e.preventDefault();
          }
        });
        el.addEventListener(&#39;touchend&#39;, () => {
          startY = 0;
        });
      },
    },
    mounted() {
      this.stopScroll();
    },
  };
</script>

Le code ci-dessus est appelé dans le cycle de vie monté. Nous obtenons l'élément conteneur qui doit être désactivé, lions les trois événements touchStart, touchmove et touchEnd et les traitons dans la fonction de gestion des événements. La barre de défilement glisse pour obtenir l'effet d'interdire le défilement.

Résumé

Grâce aux deux méthodes ci-dessus, nous pouvons obtenir l'effet de désactiver le défilement par défaut de la page. La méthode de mise en œuvre spécifique peut être sélectionnée en fonction des exigences réelles du projet.

Bien sûr, si vous utilisez la deuxième méthode, vous devez également faire attention aux problèmes de performances, car l'événement touchmove sera déclenché à chaque fois que vous faites défiler, et le scrollTop et le scrollHeight de l'élément doivent être recalculés. Par conséquent, lors de l’utilisation, il est nécessaire d’optimiser au maximum le code pour améliorer les performances.

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!