Comment vue+swiper implémente le menu de la barre latérale

Cette fois, je vais vous montrer comment implémenter le menu de la barre latérale avec vue+swiper Quelles sont les précautions pour implémenter le menu de la barre latérale avec vue+swiper. Ce qui suit est un cas pratique. Jetons un coup d'oeil une fois.

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

Ce glissement vers la gauche et vers la droite et vers le haut et vers le bas utilise principalement la fonction carrousel de Swiper. Le premier est le code du composant défini 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 'vue-awesome-swiper' 
 export default { 
 name: "s-slider", 
 props: ['leftWidth','rightWidth','topHeight','bottomHeight'], 
 data() { 
  return { 
  horizontalSwiperOptions: { 
   slidesPerView: 'auto', 
   initialSlide: 0, 
   direction: 'horizontal' 
  }, 
  verticalSwiperOptions:{ 
   slidesPerView: 'auto', 
   initialSlide: 0, 
   direction: 'vertical' 
  } 
  } 
 }, 
 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 attributs, à savoir la largeur du menu coulissant gauche et droit, la hauteur du menu coulissant haut et bas, leftWdith, rightWidth, topHeight, bottomHeight, puis utilise un carrousel horizontal pour stocker le menu coulissant gauche et le contenu central. Le menu glisse vers la droite, puis un carrousel vertical est placé dans le contenu central pour placer le menu déroulant, le contenu et le menu déroulant. L'idée spécifique est la suivante. 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 mises à jour comme d'habitude. Définissez la largeur et la hauteur précédentes pour le glissement. Appelé dans 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de transfert et de distribution de données de vue.js

Instructions personnalisées dans Angular17 Mode d'emploi détaillé

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!