这次给大家带来vue+swiper如何实现侧边栏菜单,vue+swiper实现侧边栏菜单的注意事项有哪些,下面就是实战案例,一起来看一下。
本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码,供大家参考,具体内容如下
这个左右滑动以及上下滑动主要使用了Swiper的轮播功能,首先是该自定义组件的代码:
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;
}
}
}
@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
}
}
该组件自定义了四个属性,分别是左右侧滑菜单的宽度,上下滑动菜单的高度,leftWdith、rightWidth、topHeight、bottomHeight,然后用了一个横向的轮播用来存放左滑菜单,中间内容,右滑菜单,然后在中间内容又放了一个纵向的轮播用来放置上滑菜单,内容以及下滑菜单,具体思路就是这样。在组件挂载的时候,需要根据父组件传入的数值去初始化四个菜单的宽高,初始化完毕宽高之后,还要调用swiper本身的updateSlides更新所有的slides,不然滑动的时候,还是按照没设置之前的宽高进行滑动。在父组件中调用:
left
Content
right
top
bottom
不要忘了在父组件中还要引入这个vue组件。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: