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语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
详解Eslint 配置及规则说明
Sep 10 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 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实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
node.js实现端口转发
2016/04/14 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
使用SAE部署Python运行环境的教程
2015/05/05 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
产品质量承诺书
2014/03/27 职场文书
党员服务承诺书
2014/05/28 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
高三语文复习计划
2015/01/19 职场文书
中考学习决心书
2015/02/04 职场文书
负责培养人意见
2015/06/05 职场文书
公司安全管理制度范本
2015/08/05 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server