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如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
jQuery 性能优化指南 (1)
May 21 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
JS前端加密算法示例
2016/12/22 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
django API 中接口的互相调用实例
2020/04/01 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python上selenium的弹框操作实现
2020/07/13 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
日本语毕业生自荐信
2014/02/01 职场文书
小学生检讨书大全
2014/02/06 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
科学育儿宣传标语
2014/10/08 职场文书
开幕式邀请函
2015/01/31 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Python获取字典中某个key的value
2022/04/13 Python