What are the uses of swiper in vue?

This time I will bring you how to use swiper in vue, what are the notes when using swiper in vue, the following is a practical case, let's take a look.

Swiper is a sliding special effects plug-in created purely with javascript, targeting mobile phones, tablets and other mobile terminals. This article mainly introduces the solution to the use of swiper plug-in in vue and the usage of swiper in vue. Friends in need can refer to

Swiper Introduction

Swiper is often used for content touch sliding on mobile websites.

Swiper is a sliding special effects plug-in created purely with JavaScript, targeting mobile terminals such as mobile phones and tablets.

Swiper can achieve common effects such as touch screen focus image, touch screen Tab switching, touch screen multi-image switching, etc.

Swiper is open source, free, stable, simple to use, and powerful. It is an important choice for building mobile terminal websites!

Solve the problem of using the swiper plug-in in vue. After introducing the swiper plug-in, we found that it could not run normally.

This time we simulated removing the data from the background, and then data binding in the swiper tag.

<template> 
 <p class="homePage"> 
  <abc></abc> 
  <p id="banner"> 
   <p class="swiper-container"> 
     <p class="swiper-wrapper"> 
     <p class="swiper-slide" v-for="items in swiper" ><a href=""><img :src=" rel="external nofollow" items.activity.img"></a></p> 
     </p> 
     <p class="swiper-pagination"></p> 
   </p> 
  </p> 
 </p> 
</template> 
<script> 
import Swiper from "../../static/js/swiper-3.4.0.min.js"; 
import header from 'components/header.vue'; 
export default { 
 components : { 
  abc : header 
 }, 
 data(){ 
 return { 
  swiper:"" 
 } 
 }, 
 mounted(){ 
 this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){ 
   this.swiper=res.data.data.slide; 
   var mySwiper = new Swiper('.swiper-container', { 
   autoplay: 2000,//可选选项，自动滑动 
    //分页器 
   pagination : '.swiper-pagination', 
   paginationClickable :true, 
   observer: true 
   }) 
  }) 
 } 
 
} 
</script> 
<style type="text/css"> 
 @import "../../static/css/home.css"; 
 @import "../../static/css/swiper-3.4.0.min.css"; 
</style>

The key point is the use of mounted(). These methods need to be used in mounted(). mounted() is the vuelife cycle hook. You can also understand it as the current This method will be triggered only after mounting the instance to the DOM.

Let’s take a look at the usage of swiper in vue

First passnpm i vue-awesome-swiper --save Download the plug-in in vue

Then introduce it into main.js

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

Then insert the code into the structure of the component you need to use

<p class="banner">
<swiper :options="swiperOption">
<swiper-slide v-for="items in allData.bannerphoto" key="items">
<img :src="items" alt="">
</swiper-slide>
<p class="swiper-pagination" slot="pagination"></p>
</swiper>
<p class="jc"></p>
</p>

Then in the data Define the carousel chart

swiperOption: {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: false,
coverflow: {
　　rotate: 30,
　　stretch: 10,
　　depth: 60,
　　modifier: 2,
　　slideShadows : true
　　}
},

The coverflow at this time is the way to switch the carousel chart. Changing the properties can switch the carousel mode.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of using mint-ui in vue

Detailed explanation of using webpack hot module replacement

How to choose the jQuery version

The above is the detailed content of What are the uses of swiper in vue?. For more information, please follow other related articles on the PHP Chinese website!