minG-j 2019-08-25 19:35 采纳率: 0%
浏览 1315

vue的 transition-group 轮播图在图片播放时页面会自动跳转到顶部

我用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>
  • 写回答

1条回答 默认 最新

  • Kuukiliselessness 2019-08-29 17:45
    关注

    你说的情况很像是 transition动画周期 两个盒子(li标签)同时存在的时候 把父辈标签撑大了 造成的页面高度变化。但是你这里给 .box 有设置了固定高度 和 overflow hidden。所以你可以把 mj 这个动画发出来看看嘛,或者把动画周期调长一些看能不能找到问题?

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题