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 相关文章推荐
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue-test-utils初使用详解
May 23 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 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中目录,文件操作详谈
2007/03/19 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
python采集博客中上传的QQ截图文件
2014/07/18 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python2.7到3.x迁移指南
2018/02/01 Python
python之消除前缀重命名的方法
2018/10/21 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
logging level级别介绍
2020/02/21 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
大学生就业自我鉴定
2013/10/26 职场文书
大学自我鉴定
2013/12/20 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
校园安全教育广播稿
2014/02/17 职场文书
读书活动总结
2014/04/28 职场文书
厕所文明标语
2014/06/11 职场文书
大学活动总结模板
2014/07/10 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
出租房屋协议书
2014/09/14 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
运动会广播稿20字
2015/08/19 职场文书
简短清晨问候语
2015/11/10 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript