我用vue的 transition-group 写了一个轮播图的组件,放入页面后正常,但是只要页面向下滚动一点, 在轮播图跳转的时候页面也就自动回到顶部了,请问一下这个问题出在哪里,然后需要怎么解决呢?求大神帮帮忙
我的组件代码如下:
<template>
<div id="transition-a">
<div class="box">
<!-- <ul> -->
<transition-group tag="ul" name="mj">
<li v-for="(img,$index) in imgList" :key="$index" v-show="index == $index">
<h2>{{$index+1}}</h2>
<img :src="img.url" alt="">
</li>
</transition-group>
<!-- </ul> -->
</div>
</div>
</template>
<script>
import imgs from "../../static/json.json"
export default{
name:"transition-a",
data(){
return{
imgList:imgs.data,
index:0,
}
},
methods:{
setTime(){
if(this.index == this.imgList.length - 1){
this.index = 0
}else{
this.index ++
}
}
},
created(){
setInterval(this.setTime,1000)
}
}
</script>
<style scoped>
.box{
height: 536px;
text-align: center;
padding: 60px 0 5000px 0;
overflow: hidden;
}
ul{
list-style: none;
padding:0
}
</style>