집 >웹 프론트엔드 >JS 튜토리얼 >vue에서 swiper의 용도는 무엇입니까?

vue에서 swiper의 용도는 무엇입니까?

php中世界最好的语言원래의: 2018-04-20 10:18:491953검색

이번에는 Vue에서 Swiper를 사용하는 방법과 Vue에서 Swiper를 사용할 때 주의 사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

Swiper는 javascript로만 제작된 슬라이딩 특수 효과 플러그인으로, 휴대폰, 태블릿 및 기타 모바일 단말기를 대상으로 합니다. 이 글은 주로 Vue의 스와이퍼 플러그인 사용과 Vue의 스와이퍼 사용법을 소개합니다. 필요한 친구들은

스와이퍼 소개

스위퍼는 터치하고 슬라이드하는 데 자주 사용됩니다. 모바일 웹사이트의 콘텐츠.

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