溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了vue swiper實現側滑菜單效果的具體代碼，供大家參考，具體內容如下
先上效果圖：
這個左右滑動以及上下滑動主要使用了Swiper的輪播功能，首先是該自定義組件的代碼：
<template>
<div class="s-slider">
<swiper :options="horizontalSwiperOptions" ref="horizontalSwiper">
<swiper-slide class="left" ref="left" v-bind:>
<slot name="left"></slot>
</swiper-slide>
<swiper-slide class="content">
<swiper :options="verticalSwiperOptions" ref="verticalSwiper">
<swiper-slide class="top" ref="top" v-bind:>
<slot name="top"></slot>
</swiper-slide>
<swiper-slide class="content" ref="content" v-bind:>
<slot name="content"></slot>
</swiper-slide>
<swiper-slide class="bottom" ref="bottom" v-bind:>
<slot name="bottom"></slot>
</swiper-slide>
</swiper>
</swiper-slide>
<swiper-slide class="right" ref="right" v-bind:>
<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組件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
