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 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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中的函数嵌套层数限制分析
2011/06/13 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
python 实现堆排序算法代码
2012/06/05 Python
python标准日志模块logging的使用方法
2013/11/01 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
Python docx库用法示例分析
2019/02/16 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python爬虫用mongodb的理由
2020/07/28 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
《画杨桃》教学反思
2014/04/13 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
2015年父亲节寄语
2015/03/23 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书