How to implement side sliding menu effect in vue+swiper

This article mainly introduces vue swiper to achieve the side sliding menu effect in detail. It has certain reference value. Interested friends can refer to it.

The example in this article shares the vue swiper implementation with everyone. The specific code for the side-sliding menu effect is for your reference. The specific content is as follows

First the rendering:

This left and right sliding and up and down sliding are mainly used Swiper's carousel function, first of all, is the code of the custom component:

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

This component has four customized properties, namely the width of the left and right side sliding menu, the height of the up and down sliding menu, leftWdith, rightWidth, topHeight, bottomHeight, and then use a horizontal carousel to store the left sliding menu, middle content, and right sliding menu, and then put a vertical carousel in the middle content to place the upper sliding menu, content, and sliding menu. The specific idea is this. When the component is mounted, the width and height of the four menus need to be initialized based on the values ​​passed in by the parent component. After the width and height are initialized, the updateSlides of swiper itself must be called to update all slides. Otherwise, when sliding, the width and height will still be as follows. Set the previous width and height for sliding. Call in the parent component:

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

Don’t forget to introduce this vue component in the parent component.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Migrating AngularJS1.x applications to React (detailed tutorial)

How to implement a small shopping cart in vue 2.0 Ball Parabola

#What is the role of getBoundingClientRect in js?

The above is the detailed content of How to implement side sliding menu effect in vue+swiper. For more information, please follow other related articles on the PHP Chinese website!