欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue+swiper实现侧滑菜单效果

程序员文章站 2022-07-03 09:39:56
本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码,供大家参考,具体内容如下 先上效果图: 这个左右滑动以及上下滑动主要使用了swiper的轮播功能...

本文实例为大家分享了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组件。

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