Vue 패 키 징 Swiper 이미지 윤 방 효과 구현

사진 윤 방 은 전단 에서 자주 실현 되 어야 하 는 기능 이다.최근 에 Vue.js 를 배 워 서 Swiper 를 대상 으로 포장 하여 간단 한 그림 순환 방송 구성 요 소 를 실현 합 니 다.
Swiper
패 키 징 이 이 루어 지기 전에 Swiper 를 소개 합 니 다.

Swiper 는 순수 자 바스 크 립 트 가 만 든 슬라이딩 필터 플러그 인 으로 휴대 전화,태 블 릿 PC 등 모 바 일 단말 기 를 대상 으로 한다.

Swiper 는 터치 스크린 포커 스 맵,터치 스크린 탭 전환,터치 스크린 멀 티 맵 전환 등 상용 효 과 를 실현 할 수 있다.

Swiper 오픈 소스,무료,안정,사용 이 간단 하고 기능 이 강해 서 모 바 일 단말기 사 이 트 를 구축 하 는 중요 한 선택 이다.

Swiper 의 응용 장면 이 광범 위 하고 실현 효과 가 좋 으 며 다음 의 실제 사례 는 Swiper 의 전형 적 인 응용 장면 이다.
 
Swiper 의 구체 적 인 사용 튜 토리 얼 및 상세 API,참고Swiper 중국어 네트워크
。
2.Vue 구성 요소
Vue 구성 요소 디자인 의 취 지 는 사용 에 맞 춰 유지 성과 재 활용 성 을 향상 시 키 는 것 입 니 다.한편,그림 윤 방 은 구성 요소 로 완성 하기에 적합 하기 때문에 구체 적 인 실현 을 소개 하기 전에 Vue 구성 요소 와 구성 요소 통신 에 대해 소개 합 니 다.
Vue 구성 요소 에서 가장 흔히 볼 수 있 는 것 은 부자 구성 요소 의 관 계 를 형성 하 는 것 입 니 다.구성 요소 A 는 템 플 릿 에서 구성 요소 B 를 사 용 했 습 니 다.
부모 구성 요 소 는 하위 구성 요소 에 데 이 터 를 보 낼 수 있 고,하위 구성 요 소 는 내부 에서 발생 하 는 일 을 부모 구성 요소 에 알 릴 수 있 습 니 다.그러나 좋 은 정의 의 인 터 페 이 스 를 통 해 가능 한 한 부자 구성 요 소 를 결합 시 키 는 것 도 중요 하 다.이것 은 모든 구성 요소 의 코드 가 상대 적 으로 격 리 된 환경 에서 쓰기 와 이 해 를 보장 하여 유지 가능성 과 재 활용 성 을 높 였 다.
Vue 에서 부자 구성 요소 의 관 계 는 prop 에서 아래로 전달 되 고 사건 이 위로 전달 되 는 것 으로 요약 할 수 있 습 니 다.부모 구성 요 소 는 prop 을 통 해 하위 구성 요소 에 데 이 터 를 보 내 고,하위 구성 요 소 는 이 벤트 를 통 해 부모 구성 요소 에 메 시 지 를 보 냅 니 다.
 
3.포장 실현
1.Swiper 도입
우선 Swiper 를 설치 해 야 한다.

npm install --save swiper

그리고 두 파일 을 인용 해 야 합 니 다.

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

2.HTML 코드
템 플 릿 에 라운드 맵 의 html 레이아웃 을 설정 합 니 다.

<template>
 <div class="swiper-container" :class="swipeid">
  <div class="swiper-wrapper">
   <!--           -->
   <slot name ="swiper-con"></slot>
  </div>
  <!--     -->
  <div :class="{'swiper-pagination':pagination}"></div>
 </div>
</template>

그 중에서 도 구 명 슬롯 을 사용 하여 디 결합 을 향상 시 키 고 부모 구성 요 소 를 사용 할 때 상황 에 따라 서로 다른 라운드 콘 텐 츠 를 설정 합 니 다.
또한 페이지 분할 기,즉 그림 윤 방 중의 페이지 표시 기 를 설정 해 야 한다.흔히 볼 수 있 는 작은 원점 이나 디지털 표시 기 등 이다.
3.Swiper 초기 화
스 위 퍼 에 대한 패키지 구현 라운드 맵 인 만큼 앞 에 도 스 위 퍼 가 설치 되 어 있 으 니 이 제 는 초기 화 사용 이 필요 하 다.
초기 화 에 앞서 Swiper 사용법 에 따라 멀티캐스트 구성 요소 에 필요 한 속성 정 보 를 확인 한 다음 부모 구성 요 소 를 통 해 포 장 된 Swiper 구성 요소 에 전달 합 니 다.
이 럴 때 는 props 가 필요 해 요.

props: {
 swipeid: {
  type: String,
  default: ""
 },
 effect: {
  type: String,
  default: "slide"
 },
 loop: {
  type: Boolean,
  default: false
 },
 direction: {
  type: String,
  default: "horizontal"
 },
 pagination: {
  type: Boolean,
  default: true
 },
 paginationType: {
  type: String,
  default: "bullets"
 },
 autoPlay: {
  type: Number,
  default: 3000
 }
 }

다음은 각 속성의 의 미 를 하나하나 설명 한다.
속성
속뜻
swiped
윤 방 용기 class 속성의 클래스 이름 입 니 다.
effect
그림 의 전환 효 과 는 기본적으로"slide"이 고"fade","cube","coverflow","flip"로 설정 할 수 있 습 니 다.자세 한 내용 은 effect 를 참조 하 십시오.
loop
true 로 설정 하면 loop 모드 가 열 립 니 다.loop 모드:원래 그림 의 앞 뒤 에 여러 개의 그림 을 복사 하고 적당 할 때 전환 하여 Swiper 가 순환 하 는 것 처럼 보이 게 합 니 다.자세 한 내용 은 loop 참조.
direction
그림 의 미끄럼 방향 은 수평(horizontal)이나 수직(vertical)을 설정 할 수 있 습 니 다.자세 한 내용 은 direction 을 참조 하 십시오.
pagination
페이지 내 비게 이 션 을 사용 합 니 다.자세 한 내용 은 pagination 을 보십시오.
paginationType
페이지 분할 기 스타일 형식 은"bullets","fraction","progressbar","custom"으로 설정 할 수 있 습 니 다.자세 한 내용 은 type 을 참조 하 십시오.
autoPlay
true 시작 자동 전환 으로 설정 하고 기본 전환 설정 을 사용 합 니 다.자세 한 내용 은 autoplay 를 참조 하 십시오.
위의 각 속성의 의 미 를 알 게 되면 Swiper 를 초기 화하 고 구체 적 인 속성 을 설정 할 수 있 습 니 다.
Swiper 를 초기 화 할 때 두 개의 인자 가 들 어 와 야 합 니 다.

윤 방 용기 의 유형 명

사진 윤 방 구성 요소 의 상세 한 기능 을 대표 하 는 대상

var that = this;
 this.dom = new Swiper("." + that.swipeid, {
  //  
  loop: that.loop,
  //   
  pagination: { 
  el: ".swiper-pagination",
  bulletClass : 'swiper-pagination-bullet',
   },
  //    
  paginationType: that.paginationType,
  //    
  autoPlay: that.autoPlay,
  //  
  direction: that.direction,
  //  
  effect: that.effect,
  //    swiper  ，   autoplay
  disableOnInteraction: false,
  //  swiper       ，     swiper
  observer: true,
  //  swiper     ，     swiper
  observeParents: true
 });
 }

4.사용자 정의 라운드 방송 효과
위의 절 차 를 거 쳐 윤파 기 는 다 밀봉 되 었 다.우 리 는 자신 이 원 하 는 재생 기 효 과 를 사용자 정의 로 실현 할 수 있다.다음은 알 고 있 는 API 를 예 로 들 어 그림 윤 방 을 실현 한다.
1.HTML 코드

<m-swipe swipeid="swipe" ref="swiper" :autoPlay="3000" effect="slide">
  <div v-for="top in tops" :key="top.id" class="swiper-slide" slot="swiper-con" >
  <img :src="top.image">
  <h3>{{top.title}}</h3>
  </div>
</m-swipe>

우선 등록 구성 요 소 를 참조 하려 면 자세히 쓰 지 않 습 니 다.
그 중에서 m-swipe 는 앞에서 실 현 된 그림 윤 방 구성 요소 이 고 그 중의 하위 구성 요 소 는 바로 구명 슬롯 을 통 해 삽 입 된 윤 방 내용 이다.
2.CSS 코드

.swiper-container {
 width: 100%;
 }
 .swiper-slide {
 height: 8rem;
 overflow: hidden;
 position: relative;
 }
.swiper-slide {
 div {
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0.4;
 position: absolute;
 background-color: @blue;
 }
 img {
 top: 50%;
 position: relative;
 transform: translate(0, -50%);
 }
 h3 {
 width: 70%;
 color: #fff;
 margin: 0;
 font-size: 0.5rem;
 line-height: 1rem;
 right: 5%;
 bottom: 2.6rem;
 text-align: right;
 position: absolute;
 text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
 &:before {
  content: "";
  width: 3rem;
  bottom: -0.6rem;
  right: 0;
  display: block;
  position: absolute;
  border: 2px solid @yellow;
 }
 }
}
.swiper-pagination-bullet-active {
 background: #fff;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
 bottom: 1rem;
 width: 95%;
 text-align: right;
 }

그 중에서swiper-pagination-bullet-active 은 페이지 기 에서 현재 지시 하 는 작은 원점 의 유형 을 대표 합 니 다.swiper-pagination-bullets 는 페이지 분할 기의 유형 을 대표 합 니 다.자세 한 내용 은pagination 페이지 내 요소 의 클래스 이름참조.
네트워크 요청 데이터 에 대한 코드 는 붙 이지 않 습 니 다.아래 에 소스 주소 가 있 습 니 다.
3.효과
 
이것 은 단순 한 패 키 징 효과 일 뿐 더 많은 효 과 를 실현 하려 면 Swiper 에서 제공 하 는 더 많은 기능 을 통 해 이 루어 질 수 있다.
Github 주소:사진 윤파
총결산
위 에서 설명 한 바 와 같이 편집장 님 께 서 소개 해 주신 Vue 패키지 Swiper 가 사진 윤 방 효 과 를 실현 하 는 데 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글로 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!