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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
JS简单获得节点元素的方法示例
Feb 10 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
简析Python的闭包和装饰器
2016/02/26 Python
简述Python中的进程、线程、协程
2016/03/18 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
社会保险接收函
2014/01/12 职场文书
运动会广播稿400字
2014/01/25 职场文书
幼儿教师培训感言
2014/03/08 职场文书
开工仪式主持词
2014/03/20 职场文书
党员干部承诺书范文
2014/03/25 职场文书
财政局长个人总结
2015/03/04 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers