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 相关文章推荐
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php 猴子摘桃的算法
2017/06/20 PHP
python进程与线程小结实例分析
2018/11/11 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
JavaScript使用cookie
2007/02/02 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
解决Django连接db遇到的问题
2019/08/29 Python
python实现淘宝购物系统
2019/10/25 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
智能电子应届生求职信
2013/11/10 职场文书
庆元旦广播稿
2014/02/10 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
介绍信怎么写
2015/05/05 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android