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 相关文章推荐
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
JS数组的常用方法整理
Mar 31 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
在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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php车辆违章查询数据示例
2016/10/14 PHP
php实现评论回复删除功能
2017/05/23 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
分页栏的web标准实现
2011/11/01 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
Python中的进程分支fork和exec详解
2015/04/11 Python
对python 命令的-u参数详解
2018/12/03 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
工作人员思想汇报
2014/01/09 职场文书
工商干部先进事迹
2014/05/14 职场文书
个人思想政治总结
2015/03/05 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
Python图片检索之以图搜图
2021/05/31 Python
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python