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 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
如何手写一个简易的 Vuex
Oct 10 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实现简单登录界面
2019/10/23 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
js 毫秒转天时分秒的实例
2017/11/17 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
先进个人评语大全
2015/01/04 职场文书
兵马俑的导游词
2015/02/02 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技