이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 Vue에서 스와이퍼를 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!