Comment détecter la butée coulissante en vue

Dans le développement front-end, la tendance à l'utilisation des pages mobiles se développe progressivement. Dans le même temps, la méthode de fonctionnement du terminal mobile est également différente de celle du terminal PC. Le glissement est devenu l'une des opérations les plus fréquentes des utilisateurs. Le glissement n'est pas seulement utilisé lors de la navigation sur le Web, mais il est également couramment utilisé dans diverses applications, telles que la lecture d'actualités, la navigation dans des produits, le visionnage de vidéos, etc. Par conséquent, la détection efficace des arrêts coulissants est devenue un problème dont de nombreux ingénieurs front-end ont besoin. à résoudre.

Vue est l'un des frameworks front-end les plus populaires de nos jours, et de plus en plus de développeurs utilisent Vue pour le développement mobile. Cet article explique comment utiliser Vue pour détecter les arrêts coulissants.

1. Introduction aux événements de glissement

Dans le développement mobile, nous utilisons principalement deux événements pour détecter le glissement : touchstart et touchmove. Lorsque le doigt touche l'écran, l'événement touchstart est déclenché ; lorsque le doigt glisse sur l'écran, l'événement touchmove est déclenché. Nous pouvons obtenir la direction et la distance de glissement en écoutant ces deux événements et en obtenant les informations de coordonnées du doigt sur l'écran, puis en calculant la distance de mouvement du doigt.

2. Méthode de détection de l'arrêt coulissant

Dans Vue, nous pouvons utiliser des instructions personnalisées pour écouter les événements de glissement. Les directives personnalisées sont une fonctionnalité très utile dans Vue, qui peut facilement lier des événements et des attributs directement aux éléments DOM.

Ce qui suit est un exemple simple. Nous pouvons ajouter une instruction v-touchend à un élément. Cette instruction sera déclenchée lorsque le doigt quitte l'écran, et la direction et la distance de glissement du doigt peuvent être obtenues dans l'instruction.

Vue.directive('touchend', {
  bind: function(el, binding) {
    let startX, startY;
    el.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener('touchend', function(event) {
      let endX = event.changedTouches[0].clientX;
      let endY = event.changedTouches[0].clientY;
      let distanceX = endX - startX;
      let distanceY = endY - startY;
      let direction = '';
      if (Math.abs(distanceX) < Math.abs(distanceY)) {
        // 垂直方向滑动
        if (distanceY < 0) {
          direction = &#39;up&#39;;
        } else {
          direction = &#39;down&#39;;
        }
      } else {
        // 水平方向滑动
        if (distanceX < 0) {
          direction = &#39;left&#39;;
        } else {
          direction = &#39;right&#39;;
        }
      }
      binding.value(direction, distanceX, distanceY);
    });
  }
});

Dans cet exemple, nous utilisons la fonction bind hook pour enregistrer la commande, puis écoutons les événements touchstart et touchend via la méthode addEventListener, calculons la distance et la direction du glissement du doigt et transmettons les résultats à la fonction liée à la commande.

3. Scénarios d'application d'arrêt coulissant

Dans le développement mobile, il existe de nombreux scénarios d'application qui doivent détecter un arrêt coulissant, tels que le pull-down pour actualiser, le pull-up pour charger, etc. Nous pouvons implémenter ces fonctions en déclenchant des événements correspondants lorsqu'une butée coulissante est détectée.

En prenant le pull-to-refresh comme exemple, nous pouvons ajouter une icône déroulante à l'élément lié à l'instruction v-touchend. Elle apparaîtra lorsque l'utilisateur descendra jusqu'à une certaine distance, et le pull-down vers. L'événement d'actualisation sera automatiquement déclenché lorsque l'utilisateur lâche prise.

Vue.directive('pull-refresh', {
  bind: function(el, binding) {
    let startX, startY;
    let refreshHeight = 60; // 下拉刷新高度
    let refreshIcon = document.createElement('img');
    refreshIcon.src = 'https://xxx.com/icons/refresh.png';
    refreshIcon.width = 40;
    refreshIcon.height = 40;
    refreshIcon.style.display = 'none';
    refreshIcon.style.marginLeft = '-20px';
    refreshIcon.style.position = 'absolute';
    refreshIcon.style.top = '-50px';
    el.appendChild(refreshIcon);
    el.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener('touchmove', function(event) {
      let endY = event.changedTouches[0].clientY;
      let distanceY = endY - startY;
      if (distanceY > refreshHeight) {
        refreshIcon.style.display = 'block';
        binding.value();
      } else {
        refreshIcon.style.display = 'none';
      }
    });
  }
});

Dans cet exemple, nous utilisons une instruction personnalisée v-pull-refresh Après avoir lié cette instruction à l'élément, l'événement d'actualisation déroulant sera déclenché lorsque l'utilisateur abaissera plus de 60 pixels.

4. Résumé

Cet article présente brièvement l'événement de glissement mobile et comment ajouter des instructions personnalisées dans Vue pour détecter l'arrêt coulissant afin d'obtenir une actualisation déroulante et d'autres fonctions. En plus de l'actualisation déroulante, la butée coulissante peut également être utilisée pour réaliser un chargement pull-up, un carrousel d'images et d'autres effets. La maîtrise de ces compétences de contrôle coulissant sera d'une grande aide pour améliorer l'expérience utilisateur des applications mobiles.

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!