VUE 3D轮播图封装实现方法


Posted in Javascript onJuly 03, 2018

本文为大家分享了VUE 3D轮播图封装的具体代码,供大家参考,具体内容如下

一、体验地址

VUE 3D轮播图

VUE 3D轮播图封装实现方法

二、实现功能点

(1)、无缝轮播
(2)、进入变大、离开缩小(类3d切换效果)

三、js代码

<!--轮播图插件模板-->
<template>

</template>

<script type="text/ecmascript-6">
 import {swiper, swiperSlide} from 'vue-awesome-swiper'
 require('swiper/dist/css/swiper.css');//注意这里
 import Pageination from "./pageination"
 import { mapActions, mapMutations, mapGetters, mapState} from "vuex"
 import {getPriceSymbolValue} from '../../util/tool/index'

 export default {
  //props: ['bannerList'],
  data() {
   let _self=this;
   return {
    pageinationIndex:0,
    data: {
     "bannerList":[]
    },
    swiperOption: {
     loop: true,  // 循环
     speed:500,  //切换速度
     mousewheelControl: false,// 禁止鼠标滚轮切换
     lazy: {
      loadPrevNext: true,
     },
     pagination: {
      el: '.swiper-pagination',
     },
     autoplay: {
      delay:2000,
      stopOnLastSlide: false, // 切换到最后一个时不停止
      disableOnInteraction: false, //用户操作swiper之后 不停止autoplay
     },
     watchSlidesProgress:true,
     centeredSlides: true, //设定为true时,活动块会居中,而不是默认状态下的居左。
     spaceBetween:10,
     slidesPerView: 1.7,
     loopedSlides :2,
     observer: true,
     observeParents: true
    }
   }
  },
  methods: {
  },
  mounted() {
   // 这边就可以使用swiper这个对象去使用swiper官网中的那些方法
//   this.$nextTick(function() {
//    this.swiper.slideTo(3, 10, false);
//   });
  },
  computed: {
   swiper() {
    return this.$refs.mySwiper.swiper
   }
  },
  components: {
   swiper,
   swiperSlide,
   Pageination
  }
 }
</script>

<style lang="scss" type="text/scss">

</style>

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

Javascript 相关文章推荐
JavaScript内核之基本概念
Oct 21 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
vue.js轮播图组件使用方法详解
Jul 03 #Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 #Javascript
解析vue data不可以使用箭头函数问题
Jul 03 #Javascript
详解Vue SPA项目优化小记
Jul 03 #Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
JS实现显示当前日期的实例代码
Jul 03 #Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
document对象execCommand的command参数介绍
2006/08/01 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
使用python实现ANN
2017/12/20 Python
Python实现k-means算法
2018/02/23 Python
对Python 数组的切片操作详解
2018/07/02 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
询价采购方案
2014/06/09 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
公司保密管理制度
2015/08/04 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技