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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
详解js前端代码异常监控
Jan 11 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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_SELF的安全问题
2009/09/05 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php绘制一条弧线的方法
2015/01/24 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python新手学习函数默认参数设置
2020/06/03 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
为什么要做架构设计
2015/07/08 面试题
建筑专业自荐信
2013/10/18 职场文书
《桥》教学反思
2014/04/09 职场文书
个人考核材料
2014/05/15 职场文书
学校创先争优活动总结
2014/08/28 职场文书
村委会贫困证明范文
2014/09/21 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
学困生转化工作总结
2015/08/13 职场文书