Vue se rend compte que la liste ne glisse pas facilement après un appui long

Preface

Vue est un framework JavaScript moderne permettant de créer des interfaces utilisateur. Il s'intègre parfaitement aux projets existants et offre un moyen élégant de créer des applications Web interactives grâce à ses fonctionnalités riches et son API facile à apprendre. Dans cet article, nous discuterons du problème qui peut rendre le glissement irrégulier lors de l'utilisation de Vue pour implémenter un appui long, puis faire glisser la liste, et proposer une solution.

Description du problème

Lorsque nous utilisons des composants de liste dans Vue, nous pouvons rencontrer le besoin de faire glisser plus d'options après avoir appuyé longuement sur un élément de la liste. Cette exigence peut être satisfaite à l'aide des événements touchstart, touchmove et touchend, mais dans certains cas, il y aura un problème avec les éléments de la liste qui glissent de manière irrégulière. La manifestation spécifique est que lors du glissement après un appui long, les éléments de la liste sont visiblement bloqués et retardés.

Analyse des problèmes

Lorsque nous appuyons longuement sur un élément de la liste et le faisons glisser, le mécanisme de rendu à l'intérieur de Vue provoquera un blocage, entraînant un glissement irrégulier. Lorsque nous effectuons une opération d'appui long, l'événement Touchstart sera déclenché et la minuterie démarrera. La minuterie est utilisée pour déterminer si l'événement d'appui long est déclenché. Pendant la minuterie, si l'utilisateur effectue une opération de balayage, l'événement Touchmove sera déclenché et le comportement de défilement par défaut du conteneur sera empêché. Cependant, comme Vue utilise une méthode asynchrone pour mettre à jour le DOM, si l'utilisateur glisse trop vite ou s'il y a trop d'éléments de liste, Vue risque de ne pas être en mesure de mettre à jour le DOM à temps. De cette manière, les décalages et les retards affecteront grandement l’expérience utilisateur.

Solution

Afin de résoudre ce problème, nous pouvons utiliser les deux méthodes suivantes :

1. Debounce
# 🎜 🎜#

Debounce est un moyen de résoudre les problèmes de performances causés par le déclenchement fréquent d'événements en JavaScript. Le principe de mise en œuvre est que dans le délai imparti, seul le dernier événement déclenché sera exécuté. Nous pouvons utiliser la méthode _.debounce() fournie dans Lodash.js pour obtenir cet effet.

La façon d'utiliser l'anti-rebond est de démarrer un chronomètre lors de l'événement Touchstart. S'il n'y a pas de glissement dans un certain laps de temps, cela sera jugé comme un événement d'appui long et le mode glissement sera. allumé. En mode coulissant, cette minuterie sera appelée à chaque fois que l'événement Touchmove est déclenché. Si le glissement dépasse une certaine plage, il sera jugé comme une opération de glissement et le mode d'appui long sera annulé. En raison de la méthode anti-rebond, lorsque notre opération de glissement est trop rapide, seul le dernier événement sera exécuté, ce qui peut éviter d'affecter les performances et de provoquer un glissement irrégulier.

Virtual-scroll

Virtual-scroll est une technologie de défilement virtuel qui restitue uniquement les éléments de liste dans la zone visible lors du défilement. . Cette approche peut améliorer considérablement les performances d’une liste, en particulier lorsque le nombre d’éléments de liste est important. Virtual-scroll peut être implémenté à l'aide du composant vue-virtual-scroll-list.

La façon d'utiliser le composant vue-virtual-scroll-list est que vous devez d'abord transmettre les données de l'élément de liste dans le composant en tant qu'accessoire et spécifier certaines propriétés dans le composant, telles que item- hauteur (hauteur de chaque élément de la liste), total (nombre d'éléments de la liste), etc. Ensuite, le composant restituera uniquement les éléments de la liste dans la zone visible lors du rendu, et la zone visible sera ajustée dynamiquement lors du défilement. Cela peut éviter de rendre trop d’éléments de liste et de provoquer un glissement fluide.

Résumé

Lorsque vous utilisez Vue pour implémenter le glissement après un appui long sur la liste, cela peut provoquer le problème d'un glissement irrégulier. Il existe deux façons de résoudre ce problème. La première consiste à utiliser l'anti-rebond, à démarrer le minuteur dans l'événement Touchstart, à calculer la méthode de fonctionnement de l'utilisateur en fonction du minuteur et à annuler le minuteur. L'autre consiste à utiliser Virtual-scroll, qui améliore les performances en affichant uniquement les éléments de liste actuellement visibles. J'espère que cet article sera utile aux lecteurs qui rencontrent de tels problèmes.

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!