这篇文章将为大家详细讲解有关Vue中如何实现轮播图效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了喀什免费建站欢迎大家使用!
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中如何实现轮播图效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
名称栏目:Vue中如何实现轮播图效果
链接地址:https://www.cdcxhl.com/article36/jjdcsg.html
成都网站建设公司_创新互联,为您提供商城网站、网站设计、软件开发、、网站维护、网页设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联