微客导航 » 文章资讯 » Vue 过渡实现轮播图效果

Vue 过渡实现轮播图效果

2024-02-26 19:39:03 237

Vue过渡

Vue的过渡系统是内置的，在元素从DOM中插入或移除时自动应用过渡效果。

过渡的实现要在目标元素上使用transition属性，具体实现参考Vue2过渡

下面例子中我们用到列表过渡，可以先学习一下官方的例子

要同时渲染整个列表，比如使用v-for，我们需要用到组件

Vue轮播图

我们先看这样一个列表

这个列表要从实例(见文章末尾)中获取了三张图片，要使其中的图片产生轮播，我们需要用组件替换其中的ul标签，从而实现过渡组件的功能，完整的组件DOM内容如下，下面分段解释一下


//轮播图列表







//轮播图位置指示

对应的数据结构如下：

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标识，在组件中，key是必须的，这样一个轮播图的DOM结构就完成了

接下来我们看看轮播函数的实现，再来看组件中的li元素

上面通过v-for渲染了li列表，并在其中插入了包含可点击跳转的图片，接下来看看如何实现轮播，轮播图的样式直接在后面给出大家sass代码，父元素ul设置position:relative;overflow:hidden后，li大小设为和父元素相同，absolute定位固定在父元素中，要让li按照顺序显示，需要用到v-show或v-if处理，通过index值来改变当前显示的li，本例v-show绑定条件index===currentIndex，用定时器改变currentIndex实现轮播

实例中的方法：

//在下个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()方法，鼠标移到指示点时跳转轮播图

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:0auto;
text-align:center;
font-size:0;
span{
display:inline-block;
height:6px;
width:30px;
margin:03px;
background-color:#b2b2b2;
cursor:pointer;
}
.active{
background-color:$btn-color;
}
}

滑动动画设置，知识点详见Vue教程中的过渡css类名

.list-enter-active{
transition:all1sease;
transform:translateX(0)
}

.list-leave-active{
transition:all1sease;
transform:translateX(-100%)
}

.list-enter{
transform:translateX(100%)
}

.list-leave{
transform:translateX(0)
}

完整Vue实例如下

newVue({
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过渡实现的轮播图，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue 过渡实现轮播图效果

热门推荐

随机推荐