vue+swiper에서 사이드 슬라이딩 메뉴 효과를 구현하는 방법

이 글에서는 사이드 슬라이딩 메뉴 효과를 구현하기 위한 vue+swiper를 주로 소개합니다. 관심 있는 친구들은 참고할 수 있습니다.

이 글의 예시에서는 사이드 슬라이딩 메뉴 효과를 구현하는 vue swiper를 공유합니다. 메뉴 효과는 참고용입니다. 구체적인 내용은 다음과 같습니다

먼저 렌더링은

왼쪽 및 오른쪽 슬라이딩과 위아래 슬라이딩은 주로 Swiper의 캐러셀 기능을 사용하는 코드입니다. 사용자 정의 구성 요소:

<template> 
 <p class="s-slider"> 
 <swiper :options="horizontalSwiperOptions" ref="horizontalSwiper"> 
  <swiper-slide class="left" ref="left" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
  <slot name="left"></slot> 
  </swiper-slide> 
  <swiper-slide class="content"> 
  <swiper :options="verticalSwiperOptions" ref="verticalSwiper"> 
   <swiper-slide class="top" ref="top" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
   <slot name="top"></slot> 
   </swiper-slide> 
   <swiper-slide class="content" ref="content" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
   <slot name="content"></slot> 
   </swiper-slide> 
   <swiper-slide class="bottom" ref="bottom" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
   <slot name="bottom"></slot> 
   </swiper-slide> 
  </swiper> 
  </swiper-slide> 
  <swiper-slide class="right" ref="right" v-bind:style="{&#39;background&#39;:getRandomColor()}"> 
  <slot name="right"></slot> 
  </swiper-slide> 
 </swiper> 
 </p> 
</template> 
<script> 
 import {swiper, swiperSlide, swiperWraper} from &#39;vue-awesome-swiper&#39; 
 export default { 
 name: "s-slider", 
 props: [&#39;leftWidth&#39;,&#39;rightWidth&#39;,&#39;topHeight&#39;,&#39;bottomHeight&#39;], 
 data() { 
  return { 
  horizontalSwiperOptions: { 
   slidesPerView: &#39;auto&#39;, 
   initialSlide: 0, 
   direction: &#39;horizontal&#39; 
  }, 
  verticalSwiperOptions:{ 
   slidesPerView: &#39;auto&#39;, 
   initialSlide: 0, 
   direction: &#39;vertical&#39; 
  } 
  } 
 }, 
 mounted() { 
  setTimeout(() => { 
  this._initMenuWidth(); 
  }, 20); 
 
 }, 
 methods: { 
  _initMenuWidth() { 
  this.$refs.left.$el.style.width = this.leftWidth; 
  this.$refs.right.$el.style.width = this.rightWidth; 
  this.$refs.top.$el.style.height = this.topHeight; 
  this.$refs.bottom.$el.style.height = this.bottomHeight; 
  this.horizontalSwiper.updateSlides(); 
  this.horizontalSwiper.slideTo(1, 1000, false); 
  this.verticalSwiper.updateSlides(); 
  this.verticalSwiper.slideTo(1, 1000, false); 
  }, 
  /*获取随机颜色*/ 
  getRandomColor() { 
  return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6); 
  } 
 }, 
 computed: { 
  horizontalSwiper() { 
  return this.$refs.horizontalSwiper.swiper; 
  }, 
  verticalSwiper(){ 
  return this.$refs.verticalSwiper.swiper; 
  } 
 } 
 } 
</script> 
 
<style scoped lang="scss"> 
 @import "src/base/css/public/variable.scss"; 
 @import "swiper/dist/css/swiper.css"; 
 
 .s-slider { 
 height: 100%; 
 color: white; 
 .swiper-container { 
  @include fill-with-parent 
 } 
 } 
</style>

구성 요소는 왼쪽 및 오른쪽 슬라이딩 메뉴의 너비, 위쪽 및 아래쪽 슬라이딩 메뉴의 높이, leftWdith, rightWidth, topHeight, BottomHeight의 네 가지 속성을 사용자 정의한 다음 가로 속성을 사용합니다. 왼쪽 슬라이딩 메뉴, 가운데 콘텐츠, 오른쪽을 저장하는 캐러셀을 배치한 뒤, 가운데 콘텐츠에 세로 캐러셀을 배치해 슬라이딩 메뉴와 콘텐츠, 슬라이딩 메뉴를 배치하는 것이 구체적인 아이디어다. 컴포넌트가 마운트되면 상위 컴포넌트에서 전달한 값을 기준으로 4개 메뉴의 너비와 높이를 초기화해야 하며, 너비와 높이가 초기화된 후 swiper 자체의 updateSlides를 호출하여 모두 업데이트해야 합니다. 그렇지 않으면 슬라이딩할 때 너비와 높이가 평소대로 업데이트됩니다. 상위 구성 요소 호출:

<s-slider leftWidth="200px" rightWidth="300px" topHeight="100px" bottomHeight="150px"> 
  <p slot="left"> 
  left 
  </p> 
  <p slot="content"> 
  Content 
  </p> 
  <p slot="right"> 
  right 
  </p> 
  <p slot="top"> 
  top 
  </p> 
  <p slot="bottom"> 
  bottom 
  </p> 
 </s-slider>

상위 구성 요소에 이 vue 구성 요소를 도입하는 것을 잊지 마세요.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Miglating AngularJS1.x apps to React(자세한 튜토리얼)

Vue 2.0에서 장바구니 공 포물선을 구현하는 방법

js에서 getBoundingClientRect의 역할은 무엇인가요?

위 내용은 vue+swiper에서 사이드 슬라이딩 메뉴 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!