vue+swiperでサイドスライドメニュー効果を実装する方法

この記事では主にサイドスライドメニュー効果を実現するためのvue+swiperを詳しく紹介します。興味のある方は参考にしてください

この記事の例はサイドスライドを実現するためのvueスワイパーを共有します。メニューエフェクトの具体的なコードは以下の通りです

まず、レンダリング:

この左右のスライドと上下のスライドは主に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 つのプロパティがカスタマイズされ、水平方向のプロパティが使用されます。左のスライドメニュー、真ん中のコンテンツ、右のスライドメニューを配置するカルーセル、そして真ん中のコンテンツに垂直のカルーセルを配置してスライドメニュー、コンテンツ、スライドメニューを配置するのが具体的な考え方です。コンポーネントがマウントされるとき、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 コンポーネントを親コンポーネントに導入することを忘れないでください。

上記は私があなたのためにまとめたものです。

関連記事:

AngularJS1.x アプリケーションを React に移行する (詳細なチュートリアル)

vue 2.0 でショッピング カート ボール放物線を実装する方法

js における getBoundingClientRect の役割は何ですか?

以上がvue+swiperでサイドスライドメニュー効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。