vue+swiper实现侧滑菜单效果

本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码，供大家参考，具体内容如下

先上效果图：

这个左右滑动以及上下滑动主要使用了Swiper的轮播功能，首先是该自定义组件的代码：

<template>
 <div class="s-slider">
 <swiper :options="horizontalSwiperOptions" ref="horizontalSwiper">
  <swiper-slide class="left" ref="left" v-bind:style="{'background':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="{'background':getRandomColor()}">
   <slot name="top"></slot>
   </swiper-slide>
   <swiper-slide class="content" ref="content" v-bind:style="{'background':getRandomColor()}">
   <slot name="content"></slot>
   </swiper-slide>
   <swiper-slide class="bottom" ref="bottom" v-bind:style="{'background':getRandomColor()}">
   <slot name="bottom"></slot>
   </swiper-slide>
  </swiper>
  </swiper-slide>
  <swiper-slide class="right" ref="right" v-bind:style="{'background':getRandomColor()}">
  <slot name="right"></slot>
  </swiper-slide>
 </swiper>
 </div>
</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> 

该组件自定义了四个属性，分别是左右侧滑菜单的宽度，上下滑动菜单的高度，leftWdith、rightWidth、topHeight、bottomHeight，然后用了一个横向的轮播用来存放左滑菜单，中间内容，右滑菜单，然后在中间内容又放了一个纵向的轮播用来放置上滑菜单，内容以及下滑菜单，具体思路就是这样。在组件挂载的时候，需要根据父组件传入的数值去初始化四个菜单的宽高，初始化完毕宽高之后，还要调用swiper本身的updateSlides更新所有的slides，不然滑动的时候，还是按照没设置之前的宽高进行滑动。在父组件中调用：

<s-slider leftWidth="200px" rightWidth="300px" topHeight="100px" bottomHeight="150px">
  <div slot="left">
  left
  </div>
  <div slot="content">
  Content
  </div>
  <div slot="right">
  right
  </div>
  <div slot="top">
  top
  </div>
  <div slot="bottom">
  bottom
  </div>
 </s-slider>

不要忘了在父组件中还要引入这个vue组件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。