基于vue2.0实现简单轮播图

因为之前一直在忙公司的项目,vue这块就生疏了不少,正好借这个小demo复习下vue的知识。

成都网站建设、成都网站设计过程中,需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析,以确定网站的风格、色彩、版式、交互等方面的设计方向。创新互联公司还需要根据客户的需求进行功能模块的开发和设计,包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。

先来个效果图:

基于vue2.0实现简单轮播图

如图所示,实现的就是一个间隔2.5s自动向左切换下一张的轮播图,同时鼠标移入停止轮播,移出回复轮播;
而下方按钮会根据当前图片自动变红且可以手动控制当前图片。

思路:

整个demo分为轮播图片和控制span两个部分。
按照前端工程化的需求来说,这两个部分应该解耦成两个component最后再导入页面比较合理,但由于demo较为简单,
作为练手就不搞那么复杂了,对项目有追求【强迫症】的童鞋可以往组件化的目标靠,具体方法参考我之前的博文。

第一步,先写出整体框架:

 

我们使用v-for列表渲染两个部分,值得注意的是列表渲染最好要提供一个key值,至于为什么官方文档说得很复杂,
就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug,官方给出的建议也是尽可能
在列表渲染的时候加上key值,百利无一害,养成习惯就好。

第二步:

在上一步我们渲染的是一个img数组,具体:

data () { 
  return { 
   imgArray: [ 
    '../static/timg1.jpg', 
    '../static/timg2.jpg', 
    '../static/timg3.jpg', 
    '../static/timg4.jpg' 
   ] 
  } 
 } 

然后实现轮播的原理就是创建一个变量与当前遍历的index值比对,若相同则显示,否则隐藏;
同时下方按钮index若也与变量相同则当前按钮变为活跃状态即背景变红。

 

第三步:

创建定时器,每隔2.5s给变量mark+1,挂载到钩子函数created:

export default { 
 data () { 
  return { 
   mark: 0, //比对图片索引的变量 
   imgArray: [ 
    '../static/timg1.jpg', 
    '../static/timg2.jpg', 
    '../static/timg3.jpg', 
    '../static/timg4.jpg' 
   ] 
  } 
 }, 
 methods: { 
  autoPlay () { 
   this.mark++; 
   if (this.mark === 4) { //当遍历到最后一张图片置零 
    this.mark = 0 
   } 
  }, 
  play () { 
   setInterval(this.autoPlay, 2500) 
  }, 
  change (i) { 
   this.mark = i 
  } 
 }, 
 created () { 
  this.play() 
 } 
} 
 

第四步:

加上css文件,出现基本的效果。

 

第五步:

现在我们得到的效果还是每隔一段时间图片突然变成另外一张,用户体验很差,达不到轮播的效果。
所以我们得加上过渡效果。
html:

 
    
  • css:

    .image-enter-active { 
      transform: translateX(0); 
      transition: all 1.5s ease; 
     } 
     .image-leave-active { 
      transform: translateX(-100%); 
      transition: all 1.5s ease; 
     } 
     .image-enter { 
      transform: translateX(100%); 
     } 
     .image-leave { 
      transform: translateX(0); 
     } 
    

    这里因为我们是给一个渲染列表加上过渡效果所以要使用transition-group而不是单元素的transition,否则会报错。
    另外就是记得给transition-group加上tag="ul"属性,不然就会被默认渲染成span了。
    css部分需要关联name属性值作为前缀。

    第六步

    给下方按钮增加切换图片的点击事件。
    最后我们再加上移入/移出实现关闭/打开定时器效果,即用户鼠标停留当前图片停止滚动,移出则继续。

     
     
     
    

    这个地方卡了我很长时间,因为根据原生js定时器的思路在定义定时器的时候就应该设置变量,然后把这个变量传到clearInterval函数里。
    问题在于vue函数里设置变量很不可取,存在定义域的问题,开启定时器跟关闭定时器是两个函数,不能共用一个变量。
    后来灵机一动,想到不如把变量写在data里面?
    一试,成功!

    至此,轮播图的功能基本实现。
    当然,项目做的比较简陋也存在一些bug,如当一个切换动画未完成前点击另一个按钮会出现神奇的交错现象,由于时间关系还未解决,
    希望各位看官能提出宝贵的建议!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


    文章名称:基于vue2.0实现简单轮播图
    标题URL:http://myzitong.com/article/psjghe.html