Une explication plus approfondie de la façon de mettre en œuvre la suppression par balayage vers la gauche dans les mini-programmes WeChat

L'effet glisser vers la gauche pour supprimer est très populaire dans les méthodes d'interaction avec les applications, telles que l'application universelle WeChat

WeChat glisser vers la gauche pour supprimer

Un autre exemple L'application de productivité Clear

Effacer les diapositives restantes à supprimer

Techniquement parlant, il n'est pas difficile d'obtenir cet effet La réponse Faites simplement glisser l'opération, déplacez le composant, ajoutez quelques calculs de coordonnées et enregistrez l'état. Il existe également des articles qui expliquent comment obtenir cet effet sur des mini-programmes, mais je suis fondamentalement sûr que ces développeurs ne l'ont pas testé en détail sur de vraies machines, car grâce à ma pratique, j'ai découvert qu'il est presque impossible d'y parvenir. effet parfaitement sur les mini programmesC'est une mission impossible.

Tout commence par le mécanisme événementiel de l'applet. Pour les opérations de glissement, le mini programme propose deux façons de répondre aux événements : bind et catch. La différence est de savoir s'il faut empêcher l'événement de bouillonner, mais il ne fournit pas la méthode preventDefault, ce qui signifie qu'il ne peut pas. être déterminé dynamiquement dans le programme. Empêcher un événement de surgir.

Parlons ensuite d'une autre fonctionnalité du mini programme. Cette fonctionnalité n'est valable que sur les appareils réels, c'est-à-dire que le framework fournit par défaut un effet de défilement vertical pour la page. de code, et le mini programme fournit également de manière réfléchie Got onPullDownRefresh et onReachBottom, eh bien, tout est parfait.

Ensuite, lorsque ces fonctionnalités rencontreront l'effet de glissement vers la gauche, ce sera embarrassant. Pour un effet de suppression parfait par balayage vers la gauche, lorsqu'il est jugé comme un glissement horizontal, le mouvement de l'utilisateur dans la direction verticale doit être ignoré (après tout, vous ne pouvez pas vous attendre à ce que le doigt de l'utilisateur ne bouge pas de haut en bas). Cependant, comme il n'existe pas de méthode preventDefault, vous devez soit capturer l'événement de glissement, soit vous attendre à ce que le doigt de l'utilisateur glisse strictement horizontalement.

Pour les raisons ci-dessus, parmi les mini-programmes que j'ai vus, il n'y a presque aucune opération de suppression par balayage vers la gauche. C'est presque parce qu'il y en a un qui obtient cet effet, Impression Micro Notes List

.

Liste des micro-notes d'impression

Vous pouvez voir que la page défilera de haut en bas en même temps lorsque vous balayez vers la gauche, ce qui n'est pas une bonne chose expérience. (À propos, la première version de la liste Impression Micro Notes utilise scroll-view pour obtenir cet effet, et l'expérience est encore pire)

Bien sûr, vous pouvez également attraper l'événement de glissement, mais de cette façon, le glissement horizontal ne pose aucun problème et le glissement vertical. Vous ne verrez aucune réaction lors du glissement non plus.

J'ai été très frustré lorsque j'ai découvert ces problèmes, mais je pense que le cœur du problème est de pouvoir empêcher dynamiquement la page de défiler verticalement. En plus de la vue, scroll-view a également la capacité de faire défiler verticalement et possède également un attribut scroll-y     Boolean    false     允许纵向滚动. Oui, je pense que vous y avez également pensé. Tant que cette propriété est définie dynamiquement dans les bonnes conditions, l'effet souhaité devrait être obtenu.

Du point de vue de la mise en œuvre, le défilement vertical doit d'abord être désactivé, puis activé après avoir déterminé que l'utilisateur opère verticalement. Eh bien, parfait. Mais le fait m'a encore frappé en face, l'activation de cette propriété dans l'événement touchmove n'active pas l'effet de défilement vertical.

Faites ensuite l'inverse, activez d'abord le défilement vertical, et désactivez cet attribut après avoir déterminé le fonctionnement horizontal. Eh bien, la pratique a prouvé que cette méthode fonctionne, mais des problèmes subsistent. Avant de déterminer la direction de glissement, l'utilisateur est susceptible de se déplacer dans la direction verticale. Bien qu'il soit très petit, l'utilisateur sentira toujours la page défiler de haut en bas.

Ce qui suit est l'effet d'imitation de la page d'accueil de WeChat que j'ai obtenu sur la base de cette idée

Faites glisser votre doigt vers la gauche pour supprimer

Dans les versions suivantes articles , je vais vous montrer une autre façon d'obtenir cet effet, qui élimine parfaitement le problème de défilement vertical de la page, mais présente encore d'autres limitations.

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!