Comment implémenter l'effet de menu coulissant latéral dans vue+swiper

Cet article présente principalement vue+swiper pour réaliser l'effet de menu coulissant latéral en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage vue swiper avec tout le monde. Le code spécifique pour obtenir l'effet de menu coulissant latéral est pour votre référence. Le contenu spécifique est le suivant

Tout d'abord, le rendu :

Cette gauche et le glissement vers la droite et le glissement vers le haut et vers le bas sont principalement utilisés. Pour utiliser la fonction carrousel de Swiper, le premier est le code du composant personnalisé :

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

Ce composant a personnalisé quatre propriétés, à savoir la largeur de la gauche et de la droite. menu coulissant latéral, la hauteur du menu coulissant haut et bas, leftWdith , rightWidth, topHeight, bottomHeight, puis utilisé un carrousel horizontal pour stocker le menu coulissant gauche, le contenu du milieu, le menu coulissant droit, puis placé un carrousel vertical dans le contenu du milieu pour stocker le menu coulissant supérieur, le contenu et l'idée spécifique est de faire glisser le menu vers le bas. Lorsque le composant est monté, la largeur et la hauteur des quatre menus doivent être initialisées en fonction des valeurs transmises par le composant parent. Une fois la largeur et la hauteur initialisées, les updateSlides du swiper lui-même doivent être appelés pour tout mettre à jour. Sinon, lors du glissement, la largeur et la hauteur seront toujours les suivantes. Définissez la largeur et la hauteur précédentes pour le glissement. Appelez le composant parent :

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

N'oubliez pas d'introduire ce composant vue dans le composant parent.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Migration des applications AngularJS1.x vers React (tutoriel détaillé)

Comment implémenter un petit panier en vue 2.0 Ball Parabola

Quel est le rôle de getBoundingClientRect dans js ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!