Tips for using swiper plug-in in vue-JS Tutorial-php.cn

Tips for using swiper plug-in in vue

php中世界最好的语言

Release： 2018-04-08 09:59:43

Original

2298 people have browsed it

This time I will bring you the tips for using the swiper plug-in in vue. What are the precautions for using the swiper plug-in in vue? The following is a practical case, let's take a look.

Introduction to Swiper

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 phones, tablets and other mobile terminals.

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>

Copy after login

The key point is the use of mounted(). These methods need to be used in mounted(). mounted() is the vue

life 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 pass

npm 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)

Copy after login

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>

Copy after login

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
　　}
},

Copy after login

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!