How vue+swiper implements sidebar menu-JS Tutorial-php.cn

How vue+swiper implements sidebar menu

php中世界最好的语言

Release： 2018-04-13 13:36:32

Original

3657 people have browsed it

This time I will show you how vue swiper implements the sidebar menu. What are the precautions for vue swiper to implement the sidebar menu. The following is a practical case, let's take a look.

The example in this article shares the specific code of vue swiper to achieve the side sliding menu effect for your reference. The specific content is as follows

This left and right sliding and up and down sliding mainly uses the carousel function of Swiper. The first is the code of the selfdefinition 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 '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>

Copy after login

This component has customized four properties, namely the width of the left and right sliding menu, the height of the up and down sliding menu, leftWdith, rightWidth, topHeight, bottomHeight, and then uses a horizontal carousel to store the left sliding menu and the middle content. The menu slides right, and then a vertical carousel is placed in the middle content to place the slide-up menu, content and slide-down 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 initializing the width and height, the updateSlides of swiper itself must be called to update all slides. Otherwise, when sliding, the width and height of the four menus will still be updated according to the values passed in by the parent component. Set the previous width and height for sliding. Called 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>

Copy after login

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!