Primero debes introducir vue-awesome-swiper, el código es el siguiente:
importar VueAwesomeSwiper desde 'vue-awesome-swiper' Vue.use (VueAwesomeSwiper)
Introduzca la importación CSS '../../static/swiper/swiper.min.css' en main.js
De esta forma podemos usar swiper, el código de uso es el siguiente:
Esta es la configuración utilizada dentro:
Para definir pestañas usted mismo, primero necesita saber cómo saltar automáticamente a una página de banner después de hacer clic en un botón. Utilice el método de deslizamiento y el método global de deslizamiento.
De esta manera, puede llamar directamente a this.swiper para llamar al método nativo de Seiper.
Saltar a la página especificada this.swiper.slideTo(1, 400, false) tres parámetros, el primero es el subíndice de salto, el segundo es el tiempo de salto, el tercero es la función de devolución de llamada, configurada en false La función de devolución de llamada onSlideChange no ser desencadenado.
Esto logra el efecto de hacer clic en un botón para saltar a un determinado banner. El resto es deslizarse hasta un determinado banner para iluminar automáticamente un botón. El sitio web oficial le permite usar slideChangeEnd, pero después de probarlo, este método no es fácil de uso. Finalmente usé transiciónEnd.
Nota: Cuando use métodos en Vue, debe usar on:{}. Este método tiene un ejemplo en la imagen de arriba. En principio, se pueden usar todos los métodos en el sitio web oficial de Swiper, pero si uno de ellos no está disponible, no es porque el método utilizado sea incorrecto, simplemente no admite un método determinado.