¿Cuáles son los usos de swiper en vue?
Swiper es un complemento de efectos especiales deslizantes creado exclusivamente con JavaScript, dirigido a terminales móviles como teléfonos móviles y tabletas. Este artículo presenta principalmente cómo resolver el problema del uso del complemento swiper en vue, así como el uso de swiper en vue. Los amigos necesitados pueden consultarlo.
Introducción a Swiper
Swiper se usa comúnmente para tocar y deslizar contenido en sitios web móviles.
Swiper es un complemento de efectos especiales deslizantes creado exclusivamente con JavaScript, dirigido a terminales móviles como teléfonos móviles y tabletas.
Swiper puede lograr efectos comunes como imagen de enfoque de pantalla táctil, cambio de pestaña de pantalla táctil, cambio de múltiples imágenes de pantalla táctil, etc.
Swiper es de código abierto, gratuito, estable, fácil de usar y potente. ¡Es una opción importante para crear sitios web para terminales móviles!
Resuelva el problema del uso del complemento swiper en vue. Después de introducir el complemento swiper, se descubrió que no podía ejecutarse normalmente.
Esta vez simulamos la obtención de datos en segundo plano y luego vinculamos los datos a la etiqueta swiper.
& lttemplate>
& ltp class="homePage "
& ltabc & gt& lt/ABC & gt;
& ltp id="banner">.
& ltp class="swiper-container " >>p>
& ltp class="swiper-wrapper " >>p>
& ltp class=" swiper-slide " v-for = " elementos en swiper " >& lta href = " " & gt& ltimg:src = " rel = " elementos externos sin seguimiento " . actividad . img " & gt & lt/a & gt; & gt;
& lt/p & gt;
& ltp class="swiper-pagination " >& lt/p & gt;
& lt /p & gt;
& lt/p & gt;
& lt/p & gt;
& lt/plantilla & gt;
p>
<Script>
Importar Swiper desde "../../static/js/swiper-3.4.0.min.js";
Importar encabezado de "components/header.vue";
Exportar {
Componente predeterminado:{
abc:header
},
datos(){
return{
swiper:" "
}
},
Instalado(){
Esto. $/aixianfeng/apihome.php"). Luego (función (res){
this. swiper = RES. data. data. slide;
var mySwiper = new Swiper(' . swiper-container ', {
Reproducción automática: 2000, //Opción opcional, deslizamiento automático
//Pageer
Paginación:'.
"Clave de página",
paginationClickable: verdadero,
Observador: sí
})
})
}
}
& lt/script & gt;
& ltstyle type="text/css " >>p>
@import "../../static/CSS/home . CSS ";
@import "../../static/CSS/swiper-3 . 4 . 0 . min . CSS ";
</style>La atención se centra en el uso de montado(), todos estos métodos deben usarse en montado(). montado() es un gancho del ciclo de vida de vue. También puede entenderlo como un método que solo se activará cuando la instancia se monte en el DOM.
Echemos un vistazo al uso de swiper en vue.
Primero, descargue el complemento en Vue a través de NPM I vue-Awesome-Swiper-Save.
Luego introduce main.js
require(' swiper/dist/CSS/swiper . CSS ')
Importa VueAwesomeSwiper desde "vue-awesome-swiper"
Vue. use(vueawesomewir) luego inserta el código en la estructura del componente que debe usarse.
& ltp class="banner " >>p>
& ltswiper:options = " opción de deslizar " & gt;
& ltswiper-slide v-for = " todos los datos de la foto del banner " key=" items " >>p>
& ltimg:src = " items " alt = " " & gt;
& lt/swiper-slide &. gt;
& ltp class = " swiper-pagination " slot = " pagination " >& lt/p & gt;
& lt/swiper & gt;
& ltp class="jc " >& lt/p & gt;
& lt/p & gt;Luego defina el carrusel en los datos.
opción de deslizar:{
Paginación:'. "Clave de página",
paginationClickable: true,
Reproducción automática: 2500,
autoplayDisableOnInteraction: false,
Bucle: false,
coverflow: {
Rotación: 30 grados,
Estiramiento: 10,
Profundidad: 60,
Modificador: 2,
Sombra de diapositiva: Verdadero
}
} En este momento, el flujo de cobertura es la forma de cambiar el carrusel. Cambie las propiedades para alternar el modo carrusel.
Creo que después de leer este caso, dominas el método. Para obtener contenido más interesante, preste atención a otros artículos relacionados en Gxl.
Lectura recomendada:
Explicación detallada del uso de mint-ui en vue
Explicación detallada del reemplazo y uso de módulos hot de webpack
¿Cómo elegir utilizar la versión jQuery?