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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
VUE长按事件需求详解
Oct 18 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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中switch语句用法详解
2015/08/17 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
php自动加载代码实例详解
2021/02/26 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
TensorFlow实现RNN循环神经网络
2018/02/28 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python实现kmp算法的实例代码
2019/04/03 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
趣味活动策划方案
2014/02/08 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript