javascript - changement d'onglet du swiper. Comment puis-je déplacer le conteneur du swiper en cliquant sur chaque bouton ?

Question

Comment puis-je faire bouger le conteneur de swiper en cliquant sur chaque bouton pour changer d'onglet de swiper ? Par exemple, si le changement d'onglet supérieur de NetEase clique sur chaque bouton, le conteneur de changement d'onglet défilera (1 : il peut défiler vers la gauche et la droite, et le contenu remplit le conteneur entier.,) http://3g.163.com/touch/aut...

某草草 · Answer

Défilement horizontal .topnav_list

PHP中文网 · Answer

J'ai fait une DEMO : https://codepen.io/anon/pen/d...

Il ne met en œuvre que des fonctions de base et la position du mouvement n'est pas très précise. Pour une utilisation réelle, vous devez ajuster vous-même la quantité de mouvement.

Le principe est de décaler chaque .topnav_item 绑定一个 onClick 的 listener。当点击元素时，取得该元素在 topnav_list 中的 index，然后把 .topnav_list vers la gauche en conséquence de la largeur * de la distance d'index (pas une valeur exacte, elle doit être ajustée).

Certaines syntaxes d'ES2015 sont utilisées dans la DÉMO Vous devez faire attention à la compatibilité du navigateur lorsque vous l'utilisez dans la pratique. L'image évite les problèmes en utilisant la méthode .scrollLeft() de jQuery. Vous pouvez en implémenter une vous-même en utilisation réelle.

javascript - changement d'onglet du swiper. Comment puis-je déplacer le conteneur du swiper en cliquant sur chaque bouton ?

répondre à tous(2)je répondrai