快捷導(dǎo)航

vue+swiper實現(xiàn)側(cè)滑菜單效果

更新時間：2017年12月28日 11:27:01 作者：martsforever

這篇文章主要為大家詳細(xì)介紹了vue+swiper實現(xiàn)側(cè)滑菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue swiper實現(xiàn)側(cè)滑菜單效果的具體代碼，供大家參考，具體內(nèi)容如下

先上效果圖：

這個左右滑動以及上下滑動主要使用了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); 
  }, 
  /*獲取隨機(jī)顏色*/ 
  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>

該組件自定義了四個屬性，分別是左右側(cè)滑菜單的寬度，上下滑動菜單的高度，leftWdith、rightWidth、topHeight、bottomHeight，然后用了一個橫向的輪播用來存放左滑菜單，中間內(nèi)容，右滑菜單，然后在中間內(nèi)容又放了一個縱向的輪播用來放置上滑菜單，內(nèi)容以及下滑菜單，具體思路就是這樣。在組件掛載的時候，需要根據(jù)父組件傳入的數(shù)值去初始化四個菜單的寬高，初始化完畢寬高之后，還要調(diào)用swiper本身的updateSlides更新所有的slides，不然滑動的時候，還是按照沒設(shè)置之前的寬高進(jìn)行滑動。在父組件中調(diào)用：

<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組件。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: