vue+swiper实现侧滑菜单效果
程序员文章站
2022-07-03 09:39:56
本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码,供大家参考,具体内容如下
先上效果图:
这个左右滑动以及上下滑动主要使用了swiper的轮播功能...
本文实例为大家分享了vue swiper实现侧滑菜单效果的具体代码,供大家参考,具体内容如下
先上效果图:
这个左右滑动以及上下滑动主要使用了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); }, /*获取随机颜色*/ 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组件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: oracle的redo和undo
下一篇: 百度图片排名怎么优化? 百度图片优化
推荐阅读
-
LRecyclerView侧滑iOS阻塞效果不完整的解决办法
-
Android使用ViewDragHelper实现QQ6.X最新版本侧滑界面效果实例代码
-
Android使用自定义控件HorizontalScrollView打造史上最简单的侧滑菜单
-
Android使用ViewDragHelper实现仿QQ6.0侧滑界面(一)
-
Android滑动优化高仿QQ6.0侧滑菜单(滑动优化)
-
Android中SwipeBack实现右滑返回效果
-
Android使用DrawerLayout实现仿QQ双向侧滑菜单
-
Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】
-
RecyclerView进阶:使用ItemTouchHelper实现拖拽和侧滑删除效果
-
Android之侧滑菜单DrawerLayout的使用介绍