Vue的轮播图组件实现方法


Posted in Javascript onMarch 03, 2018

今天在上慕课老师fishenal的vue实战课程的时候,有一个轮播图组件实现,在跟着做的时候,自己也踩了一些坑。此外,在原课程案例的基础上,我加入了不同方向的滑动功能。

本文章采用Vue结合Css3来实现轮播图。

首先要了解的是Vue的动画原理。在vue中,如果我们要给元素设置动画效果,则需要使用一个<transition name="targetClassName"></transition>将相应的元素包裹住,如下:

<transition name="imgShouldMove"> 
 <img v-if="shouldShow" src="/1.jpg"> 
</transition>

之后,便可以在.imgShoudMove中设置动画属性了,如下:

.imgShouldMove-enter{ 
 transition: all 0.5s; 
} 
.imgShouldMove-enter-active{ 
 transform:translateX(900px); 
}

注意在HTML中,这里<img>有一个v-if="shoudShow"属性。shouldShow这个属性是在data(){}中设置的,当shouldShow从false-->true时(即img从无到突然出现时),Vue动画原理将动画分为了 shouldShouldMove-enter 和 imgShouldMove-enter-active 两个阶段。

我本人对其的理解为,其中 shouldShouldMove-enter 表示动画开始的初始状态, imgShouldMove-enter-active 这表示动画的终止状态。而动画的触发则是通过if-show引起的。

如下图

Vue的轮播图组件实现方法

了解了这些之后,我就可以开始着手实现轮播图组件了。

首先是HTML代码:

<template>
 <div class="carousel" @mouseenter="clearInv()" @mouseleave="runInterval()">
 <div class="imgBox">
 <a :href="pics[currentIndex].href" rel="external nofollow" >
 <transition v-bind:name="'carousel-trans-' + direction + '-old'">
 <!-- isShow: false -> true
 取反后: true -> false(从显示到消失) -->
  <img v-if="!isShow" :src="pics[currentIndex].src">
 </transition>
 <transition v-bind:name="'carousel-trans-' + direction ">
 <!-- isShow: false -> true -->
 <!-- 从消失到显示 -->
  <img v-if="isShow" :src="pics[currentIndex].src">
 </transition>
 </a>
 </div>
 <h2>{{pics[currentIndex].title}}</h2>
 <ul class="pagination">
 <li v-for="(item, index) in pics" @click="goto(index)" :class="{active:index === currentIndex}">{{index + 1}}</li>
 </ul>
 <div class="prevBtn" @click="goto(prevIndex)"><i class="iconfont">?</i></div>
 <div class="nextBtn" @click="goto(nextIndex)"><i class="iconfont">?</i></div>
 </div>
</template>

Script代码:

<script>
export default {
 props:{
 pics:{
 type:Array,
 default:[]
 },
 timeDelta:{
 type:Number,
 default:2000
 }
 },
 data () {
 return {
 currentIndex:0,
 isShow:true,
 direction:'toleft'
 }
 },
 computed:{
 prevIndex(){
 this.direction = 'toleft'
 if (this.currentIndex <= 0) {
 return this.pics.length - 1
 }
 return this.currentIndex - 1
 },
 nextIndex(){
 this.direction = 'toright'
 if (this.currentIndex >= this.pics.length - 1) {
 return 0
 }
 return this.currentIndex + 1
 }
 },
 methods:{
 goto(index){
 this.isShow = false
 setTimeout(()=>{
 this.isShow = true
 this.currentIndex = index
 },10)
 
 },
 runInterval(){
 this.direction = 'toright'
 this.timer = setInterval(()=>{
 this.goto(this.nextIndex)
 },this.timeDelta)
 },
 clearInv(){
 clearInterval(this.timer)
 }
 },
 mounted(){
 this.runInterval()
 }
}
</script>

与动画相关的css代码如下

.carousel-trans-toright-enter-active,.carousel-trans-toright-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toright-enter{ 
 transform:translateX(940px); //新图片从右侧940px进入 
} 
.carousel-trans-toright-old-leave-active{ 
 transform:translateX(-940px); //老图片向左侧940px出去 
} 
.carousel-trans-toleft-enter-active,.carousel-trans-toleft-old-leave-active{ 
 transition:all 0.5s; 
} 
.carousel-trans-toleft-enter{ 
 transform:translateX(-940px); //新图片从右侧940px进入 
} 
.carousel-trans-toleft-old-leave-active{ 
 transform:translateX(940px); //老图片向左侧940px出去 
}

---------------以下为解释说明-------------

注意:对于<img>需要放在<box>里面,<box>需要设置为position:relative; 而<img>必须设置为position:absolute; 这步非常非常重要,否则每次莫名其妙的总是只有一张图片显示。

在每次切换的时候,都要触发goto()方法,将this.isShow先置false,10毫秒后,this.isShow置true。这时,html中的<transition>被触发,它与css相结合触发动画效果,持续时间为css属性中的transition所定的0.5s。

在向前、向后切换的时候,使用到了计算属性,在div.prevBtn以及div.nextBtn上,我们作了点击事件绑定,触发方法goto(),而传入的正是计算属性prevIndex, @click="goto(prevIndex)"

计算属性的设定方法如下:

computed:{ 
 prevIndex(){ 
 //经过一番计算过程得出result 
 return result //这个值即<template>中的prevIndex 
 } 
 },

每隔2秒自动滑动时,我们向left滑动,在data中,设定了变量 direction ,它的值要么为字符串'toleft',要么为'toright'。

我们在计算属性中对 this.direction 进行了设置,并在<template>中对相应的name进行了字符串拼接,如下

<transition v-bind:name="'carousel-trans-' + direction ">

在vue中,除了class和style可以传入对象、数组,其他的属性绑定必须进行字符串拼接。

以上这篇Vue的轮播图组件实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
在Vue中使用Compass的方法
Mar 02 #Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 #Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 #Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 #Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 #Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 #Javascript
vue element-ui table表格滚动加载方法
Mar 02 #Javascript
You might like
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
图片完美缩放
2006/09/07 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python生成随机密码
2015/03/10 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
浅谈python3中input输入的使用
2019/08/02 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
巴西购物网站:Onofre Agora
2020/06/08 全球购物
应征英语教师求职信
2013/11/27 职场文书
民事授权委托书范文
2014/08/02 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书