vue+swiper实现侧滑菜单效果

发布时间：2020-12-17 02:39:13 所属栏目：百科来源：网络整理

导读：本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码，供大家参考，具体内容如下先上效果图：这个左右滑动以及上下滑动主要使用了Swiper的轮播功能，首先是该自定义组件的代码： style scoped lang="scss" @import "src/base/css/public/variable.s

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

先上效果图：

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

.s-slider {
height: 100%;
color: white;
.swiper-container {
@include fill-with-parent
}
}

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!