本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码,供大家参考,具体内容如下
先上效果图:
这个左右滑动以及上下滑动主要使用了Swiper的轮播功能,首先是该自定义组件的代码:
rush:xhtml;">
<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
}
}
该组件自定义了四个属性,分别是左右侧滑菜单的宽度,上下滑动菜单的高度,leftWdith、rightWidth、topHeight、bottomHeight,然后用了一个横向的轮播用来存放左滑菜单,中间内容,右滑菜单,然后在中间内容又放了一个纵向的轮播用来放置上滑菜单,内容以及下滑菜单,具体思路就是这样。在组件挂载的时候,需要根据父组件传入的数值去初始化四个菜单的宽高,初始化完毕宽高之后,还要调用swiper本身的updateSlides更新所有的slides,不然滑动的时候,还是按照没设置之前的宽高进行滑动。在父组件中调用:
rush:xhtml;">
ottomHeight="150px">
相关文章
可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...