vue+swiper实现侧滑菜单效果


Posted in Javascript onDecember 28, 2017

本文实例为大家分享了vue 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组件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
动态加载jquery库的方法
Feb 12 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
swiper插件自定义切换箭头按钮
Dec 28 #Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 #Javascript
Vue组件通信之Bus的具体使用
Dec 28 #Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 #Javascript
Swiper自定义分页器使用详解
Dec 28 #Javascript
swiper自定义分页器使用方法详解
Sep 14 #Javascript
JavaScript实现数值自动增加动画
Dec 28 #Javascript
You might like
php adodb连接不同数据库
2009/03/19 PHP
又一个php 分页类实现代码
2009/12/03 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP7修改的函数
2021/03/09 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
js实现录音上传功能
2019/11/22 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python-基础-入门 简介
2014/08/09 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
python定位xpath 节点位置的方法
2019/08/27 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
2015秋季幼儿园开学寄语
2015/03/25 职场文书
AJAX学习笔记
2021/05/18 Javascript
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android