So implementieren Sie den seitlichen Schiebemenüeffekt in Vue+Swiper

Dieser Artikel stellt hauptsächlich Vue+Swiper vor, um den Side-Swiper-Effekt im Detail zu erzielen. Er hat einen gewissen Referenzwert.

Das Beispiel dieses Artikels teilt Vue Swiper mit Der spezifische Code zum Erzielen des seitlich verschiebbaren Menüeffekts dient als Referenz. Der spezifische Inhalt lautet wie folgt:

Dies ist links und rechts Das Schieben nach rechts und das Schieben nach oben und unten werden hauptsächlich verwendet. Um die Karussellfunktion von Swiper zu verwenden, ist der erste der Code der benutzerdefinierten Komponente:

<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>

Diese Komponente verfügt über vier angepasste Eigenschaften, nämlich die Breite des Schiebens auf der linken und rechten Seite Menü, die Höhe des Schiebemenüs nach oben und unten, leftWdith, rightWidth, topHeight, bottomHeight, und dann ein horizontales Karussell zum Speichern des linken Schiebemenüs, des mittleren Inhalts und des rechten Schiebemenüs verwendet und dann ein vertikales Karussell in der Mitte platziert Inhalt, um das obere Schiebemenü, den Inhalt und das Schiebemenü zu platzieren. Die spezifische Idee ist diese. Wenn die Komponente gemountet ist, müssen die Breite und Höhe der vier Menüs basierend auf den von der übergeordneten Komponente übergebenen Werten initialisiert werden. Nachdem die Breite und Höhe initialisiert wurden, müssen die updateSlides von Swiper selbst aufgerufen werden, um alle zu aktualisieren Andernfalls werden beim Schieben die Breite und Höhe wie gewohnt aktualisiert. Rufen Sie die übergeordnete Komponente auf:

<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>

Vergessen Sie nicht, diese Vue-Komponente in die übergeordnete Komponente einzuführen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

AngularJS1.x-Anwendungen nach React migrieren (ausführliches Tutorial)

So implementieren Sie einen kleinen Warenkorb in Vue 2.0 Ballparabel

Welche Rolle spielt getBoundingClientRect in js?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den seitlichen Schiebemenüeffekt in Vue+Swiper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!