Vue 过渡实现轮播图效果


Posted in Javascript onMarch 27, 2017

Vue 过渡

Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果。

过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过渡

下面例子中我们用到列表过渡,可以先学习一下官方的例子

要同时渲染整个列表,比如使用 v-for,我们需要用到 <transition-group> 组件

Vue 轮播图

我们先看这样一个列表

<ul>
 <li v-for="list in slideList">
  <img :src="list.image" :alt="list.desc">
 </li>
</ul>

这个列表要从实例(见文章末尾)中获取了三张图片,要使其中的图片产生轮播,我们需要用 <transition-group> 组件替换其中的 ul 标签,从而实现过渡组件的功能,完整的组件 DOM 内容如下,下面分段解释一下

<div class="carousel-wrap" id="carousel">
  // 轮播图列表
  <transition-group tag="ul" class='slide-ul' name="list">
   <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
    <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     <img :src="list.image" :alt="list.desc">
    </a>
   </li>
  </transition-group>
  // 轮播图位置指示
  <div class="carousel-items">
   <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
  </div>
</div>

对应的数据结构如下:

data: {
  slideList: [
    {
      "clickUrl": "#",
      "desc": "nhwc",
      "image": "http://dummyimage.com/1745x492/f1d65b"
    },
    {
      "clickUrl": "#",
      "desc": "hxrj",
      "image": "http://dummyimage.com/1745x492/40b7ea"
    },
    {
      "clickUrl": "#",
      "desc": "rsdh",
      "image": "http://dummyimage.com/1745x492/e3c933"
    }
  ],
  currentIndex: 0,
  timer: ''
},

在使用 v-for 时,应给对应的元素绑定一个 key 属性,相当于 index 标识,在 <transition-group> 组件中,key 是必须的,这样一个轮播图的 DOM 结构就完成了

接下来我们看看轮播函数的实现,再来看组件中的 li 元素

<li v-for="(list,index) in slideList" :key="index">
  <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <img :src="list.image" :alt="list.desc">
  </a>
</li>

上面通过 v-for 渲染了 li 列表,并在其中插入了包含可点击跳转的图片,接下来看看如何实现轮播,轮播图的样式直接在后面给出大家 sass 代码,父元素 ul 设置 position: relative;overflow: hidden 后,li 大小设为和父元素相同,absolute 定位固定在父元素中,要让 li 按照顺序显示,需要用到 v-show 或 v-if 处理,通过 index 值来改变当前显示的 li ,本例 v-show 绑定条件 index===currentIndex,用定时器改变 currentIndex 实现轮播

<li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
  <a :href="list.clickUrl" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <img :src="list.image" :alt="list.desc">
  </a>
</li>

实例中的方法:

//在下个tick执行等待图片加载完成后再
this.$nextTick(() => {
 this.timer = setInterval(() => {
  this.autoPlay()
 },4000)
}),
go() {
 this.timer = setInterval(() => {
  this.autoPlay()
 },4000)
},
stop() {
 clearInterval(this.timer)
 this.timer = null
},
change(index) {
 this.currentIndex = index
},
autoPlay() {
 this.currentIndex++
 if (this.currentIndex > this.slideList.length - 1) {
  this.currentIndex = 0
 }
}

DOM 中为每个轮播 li 元素绑定事件 @mouseenter="stop" @mouseleave="go" 事件,使轮播鼠标移入时停止,移出时再次开始。

轮播图现在位置指示,绑定类名 active 改变颜色,绑定 change() 方法,鼠标移到指示点时跳转轮播图

<div class="carousel-items">
 <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
</div>

sass 样式代码

.carousel-wrap {
 position: relative;
 height: 453px;
 width: 100%;
 overflow: hidden;
 // 删除
 background-color: #fff;
}

.slide-ul {
 width: 100%;
 height: 100%;
 li {
  position: absolute;
  width: 100%;
  height: 100%;
  img {
   width: 100%;
   height: 100%;
  }
 }
}

.carousel-items {
 position: absolute;
 z-index: 10;
 top: 380px;
 width: 100%;
 margin: 0 auto;
 text-align: center;
 font-size: 0;
 span {
  display: inline-block;
  height: 6px;
  width: 30px;
  margin: 0 3px;
  background-color: #b2b2b2;
  cursor: pointer;
 }
 .active {
  background-color: $btn-color;
 }
}

滑动动画设置,知识点详见 Vue 教程中的 过渡 css 类名

.list-enter-active {
 transition: all 1s ease;
 transform: translateX(0)
}

.list-leave-active {
 transition: all 1s ease;
 transform: translateX(-100%)
}

.list-enter {
 transform: translateX(100%)
}

.list-leave {
 transform: translateX(0)
}

完整 Vue 实例如下

new Vue({
 el: '#carousel',
 data: {
  slideList: [
    {
      "clickUrl": "#",
      "desc": "nhwc",
      "image": "http://dummyimage.com/1745x492/f1d65b"
    },
    {
      "clickUrl": "#",
      "desc": "hxrj",
      "image": "http://dummyimage.com/1745x492/40b7ea"
    },
    {
      "clickUrl": "#",
      "desc": "rsdh",
      "image": "http://dummyimage.com/1745x492/e3c933"
    }
  ],
  currentIndex: 0,
  timer: ''
 },
 methods: {
  this.$nextTick(() => {
   this.timer = setInterval(() => {
    this.autoPlay()
   },4000)
  }) 
  go() {
   this.timer = setInterval(() => {
    this.autoPlay()
   },4000)
  },
  stop() {
   clearInterval(this.timer)
   this.timer = null
  },
  change(index) {
   this.currentIndex = index
  },
  autoPlay() {
   this.currentIndex++
   if (this.currentIndex > this.slideList.length - 1) {
    this.currentIndex = 0
   }
  }
 }
})

以上就是 Vue 过渡实现的轮播图,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 #Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 #Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 #Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 #Javascript
js实现三级联动效果(简单易懂)
Mar 27 #Javascript
JS数组去重(4种方法)
Mar 27 #Javascript
JS实现隔行换色的表格排序
Mar 27 #Javascript
You might like
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
PHP实现递归的三种方法
2020/07/04 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
Javascript继承机制详解
2017/05/30 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python实现超级马里奥
2020/03/18 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
《三峡》教学反思
2014/03/01 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
学校社会实践活动总结
2014/07/03 职场文书
师德师风剖析材料
2014/09/30 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js