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 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 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查找与搜索数组元素方法总结
2015/06/12 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
php语法检查的方法总结
2019/01/21 PHP
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
粗加工管理制度
2014/02/04 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
现实表现材料范文
2014/12/23 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
彻底理解golang中什么是nil
2021/04/29 Golang