Vue 过渡实现轮播图效果
Vue 过渡Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。 过渡的实现要在目标元素上使用 transition 属性，具体实现参考Vue2 过渡 下面例子中我们用到列表过渡，可以先学习一下官方的例子 要同时渲染整个列表，比如使用 v-for，我们需要用到 Vue 轮播图我们先看这样一个列表 这个列表要从实例(见文章末尾)中获取了三张图片，要使其中的图片产生轮播，我们需要用
// 轮播图位置指示
对应的数据结构如下： 在使用 v-for 时，应给对应的元素绑定一个 key 属性，相当于 index 标识，在 接下来我们看看轮播函数的实现，再来看组件中的 li 元素 上面通过 v-for 渲染了 li 列表，并在其中插入了包含可点击跳转的图片，接下来看看如何实现轮播，轮播图的样式直接在后面给出大家 sass 代码，父元素 ul 设置 实例中的方法： {
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 元素绑定事件 轮播图现在位置指示，绑定类名 active 改变颜色，绑定 change() 方法，鼠标移到指示点时跳转轮播图 sass 样式代码 .slide-ul {
width: 100%; height: 100%; li { position: absolute; width: 100%; height: 100%; img { width: 100%; height: 100%; } } } .carousel-items { 滑动动画设置，知识点详见 Vue 教程中的 过渡 css 类名 .list-leave-active {
transition: all 1s ease; transform: translateX(-100%) } .list-enter { .list-leave { 完整 Vue 实例如下 {
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 过渡实现的轮播图，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |