집 > 기사 > 웹 프론트엔드 > Vue에서 스와이퍼 플러그인을 사용하기 위한 팁

Vue에서 스와이퍼 플러그인을 사용하기 위한 팁

php中世界最好的语言원래의: 2018-04-08 09:59:432266검색

이번에는 Vue에서 스와이퍼 플러그인을 사용할 때의 주의 사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

Swiper 소개

Swiper는 모바일 웹사이트에서 콘텐츠 터치 슬라이딩에 자주 사용됩니다.

Swiper는 javascript로만 제작된 슬라이딩 특수 효과 플러그인으로, 휴대폰, 태블릿 및 기타 모바일 단말기를 대상으로 합니다.

Swiper는 터치스크린 초점 이미지, 터치스크린 탭 전환, 터치스크린 다중 이미지 전환 등과 같은 일반적인 효과를 얻을 수 있습니다.

Swiper는 무료이고 안정적이며 사용하기 쉽고 강력한 오픈 소스입니다. 모바일 터미널 웹사이트를 구축하는 데 중요한 선택입니다!

vue에서 스와이퍼 플러그인을 사용하는 문제를 해결하기 위해 스와이퍼 플러그인을 도입한 후 제대로 실행되지 않는 것으로 나타났습니다

이번에는 백그라운드에서 데이터를 가져오는 것을 시뮬레이션한 다음 data 스와이퍼 태그에 바인딩을 추가하세요.

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

핵심은 Mounted()에서 사용해야 한다는 것입니다. Mounted()는 인스턴스가 DOM에 마운트될 때에도 사용됩니다. , 메소드가 트리거됩니다.

vue에서 swiper가 어떻게 사용되는지 살펴보겠습니다먼저

npm i vue-awesome-swiper --save 를 통해 vue에서 플러그인을 다운로드한 다음 main.js에 도입합니다

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

그런 다음 코드를

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

그런 다음 데이터에 캐러셀 이미지를 정의합니다.

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

이때의 커버플로우는 캐러셀 이미지를 전환하는 방법입니다. 속성을 변경하면 캐러셀 모드를 전환할 수 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!