Vous devez d’abord introduire vue-awesome-swiper, le code est le suivant :
importer VueAwesomeSwiper depuis 'vue-awesome-swiper' Vue.use (VueAwesomeSwiper)
Introduire l'importation CSS '../../static/swiper/swiper.min.css' dans main.js
De cette façon, nous pouvons utiliser swiper, le code d'utilisation est le suivant :
Voici la configuration utilisée ici :
Pour définir vous-même des onglets, vous devez d'abord savoir comment accéder automatiquement à une page d'accueil après avoir cliqué sur un bouton. Utilisez la méthode swiper et la méthode globale de swiper.
De cette façon, vous pouvez appeler directement this.swiper pour appeler la méthode native de seiper.
Aller à la page spécifiée this.swiper.slideTo(1, 400, false) trois paramètres, le premier est l'indice de saut, le deuxième est le temps de saut, le troisième est la fonction de rappel, définie sur false La fonction de rappel onSlideChange ne le fera pas être déclenché.
Cela a pour effet de cliquer sur un certain bouton pour accéder à une certaine bannière. Le reste consiste à glisser vers une certaine bannière pour allumer automatiquement un certain bouton. Le site officiel vous permet d'utiliser slideChangeEnd, mais après test, cette méthode n'est pas facile à utiliser., j'ai finalement utilisé transitionEnd.
Remarque : lorsque vous utilisez des méthodes dans Vue, assurez-vous d'utiliser sur :{}. Cette méthode a un exemple dans l'image ci-dessus. En principe, toutes les méthodes du site officiel de Swiper peuvent être utilisées. Cependant, si l'une des méthodes est en effet indisponible, ce n'est pas parce que la méthode utilisée est erronée, mais simplement qu'elle ne prend pas en charge une certaine méthode.