집 > 기사 > 웹 프론트엔드 > Vue에서 스와이퍼를 작동하는 방법

Vue에서 스와이퍼를 작동하는 방법

php中世界最好的语言원래의: 2018-06-11 14:19:503073검색

이번에는 Vue에서 Swiper를 사용하는 방법을 보여드리고, Vue에서 Swiper를 사용할 때 주의사항은 무엇인지 살펴보겠습니다.

Swiper 소개

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

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

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

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

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

이번에는 백그라운드에서 데이터 제거를 시뮬레이션한 후 바인딩했습니다. 스와이퍼 태그의 데이터.

<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 중국어 웹사이트의 다른 관련 기사를 주목하세요!