首页 > 其他 > 详细

在使用轮播图插件时出现抖动问题

时间:2019-09-23 00:09:46      阅读:131      评论:0      收藏:0      [点我收藏+]

今天做一个vue项目,在使用一个轮播图插件时出现了轮播图下面的div抖动问题

什么原因出现的,我也不太确定。百度后有人说是轮播的图片高度不一致导致的,然后各种css样式都来了什么隐藏溢出啊试了一下没一点卵用

 

后来看见一篇博客说在img标签的上一层div上样式加这个:

transform: translateZ(0);

 

ok成功解决。

 

==================================================

轮播插件html代码:

<mt-swipe :auto="3000">
     <mt-swipe-item v-for="img in imgList">
           <img v-bind:src="img.url" :class="{‘full‘:isFull}" alt="" />
     </mt-swipe-item>
</mt-swipe>

 

css样式代码:

.mint-swipe{
        height: 200px;
        transform: translateZ(0); //主要是加了这个,轮播下面的div就不抖动了,一口气上五楼也不废劲了
    .mint-swipe-item{
        text-align: center;

        img{
            height: 100%;
        }
        .full{
            width:100%;
        }

        }
    }

 

在使用轮播图插件时出现抖动问题

原文:https://www.cnblogs.com/spll/p/11569963.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!