移动端轮播图导致页面抖动

最新推荐文章于 2022-03-04 16:58:35 发布
最新推荐文章于 2022-03-04 16:58:35 发布
阅读量1k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41599291/article/details/91391978
版权

轮播过程导致页面抖动


原因：

  • 轮播图的图片宽高不一样
  • 调试时浏览器页面缩小

解决：

  1. 在图片父元素添加以下代码
overflow:hidden;
width:100%;
height:0;
padding-bottom:（图片高 / 宽 ）百分比;
  1. 在轮播图下面的结构添加 padding-top
  2. 为轮播图图片设置block，固定相同宽高
  3. 调试时把页面设置100%
MangGit
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+vant移动项目总结（遇到的问题）
qq_39296854的博客
05-23 292
一、安装失败 sass 卸载 重新安装 二、移动端高斯模糊效果。 加兼容前缀-webkit-backdrop-filter: blur(5px); 三、预览功能 window.open(url),安卓可以预览，ios window.open失效问题。 判断一下，安卓机用window.open,ios 用 window.location.href. navigation(url) { let u = navigator.userAgent // android终端 let isAndroid
移动端轮播图抖动问题
不完美的红烧肉的博客
07-23 697
由于移动端手指滑动并不是100%水平滑动，因此可能会出现页面上下抖动，解决方法： 先来写一个禁止滑动的函数 function bodyScroll(event){ event.preventDefault(); } step1、touchstart, touchmove事件绑定不允许页面安上下滑动： document.body.addEventListe...
解决移动端better-scroll+vue-awesome-swiper,长按拖动触发回弹特效时闪屏
CloudJay的博客
04-03 2535
如何解决弹性better-scroll+vue-awesome-swiper一起使用,在touchmove时scroll触发弹性特效,swiper会产生抖动 类库环境 vue better-scroll vue-awesome-swiper 复现要求 有个支持scroll到边界支持弹性回弹效果的类库,比如better-scroll 轮播图我用的是vue-awesome-swiper 复现该问题的伪...
swiper插件轮播图图片抖动【开发中的bug】
Teresa的前端海底乐园
03-04 1297
swiper插件轮播图图片抖动 家人们，这个真的困扰我好久了。应该是插件的坑。 在本地就不会出现这样的bug，一挪到测试环境，好家伙，图片像得了帕金森，恨不得溢出屏幕一样疯狂的抖动。 原因： 1、轮播图的图片宽高不一致 2、调试时浏览器页面缩小 解决办法： 1、给图片的父元素添加如下代码： .style{ transform: translateZ(0); overflow: hidden; padding-bottom:（图片高/宽）百分比; width:100%; height:0; }
解决移动端滑动事件冲突【有左右滑动轮播图，又有上下滑动滚动条，斜滑时会相互影响】
越努力，越幸运！
03-02 5807
前言 在移动端中，当我们的页面既有上下滑动又有左右滑动时，比如我们顶部有轮播图(左右移动)，页面还包含上下移动滚动条。当我们斜滑页面，页面也会斜着运动，即触发了左右移动事件又触发了上下移动事件。布局还可能会错乱，这不是我们想要的，我们只想它左右或者上下滑动，不同时滑动。接下来我们来解决这个问题 一、touch触摸事件介绍 touchstart：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 touchmove：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用prevent
jquery.messager.js插件导致页面抖动的解决方法
10-27
当消息提示框弹出时，如果它的插入方式或者动画效果设计不合理，就可能导致页面整体布局发生变化，进而引起视觉上的抖动。在本例中，问题出在HTML文档类型的声明上。 在HTML5之前，不同的文档类型（DOCTYPE）会导致...
CSS 控制Html页面高度导致抖动问题的原因
09-25
页面抖动通常是由于页面内容高度发生变化，导致浏览器滚动条的出现或消失，进而引起视口尺寸的变化。这种变化会导致用户界面瞬间跳动，影响用户体验。尤其是在动态加载内容或者响应式设计中，这种问题更为常见。 ...
CSS 控制因Html页面高度导致抖动的问题解决方法
09-25
由高度导致页面抖动的问题，其实究其根本原因是滚动条是否显示导致的，具体解决方法如下，有类似情况的朋友可以参考下，希望对大家有所帮助
jquery实现图片上下抖动
08-18
本教程将深入探讨如何使用jQuery来实现一个图片上下抖动的效果，这个效果常见于提示用户注意或者增加互动性的情景。 首先，我们需要引入jQuery库。在HTML文件的`<head>`部分，添加以下代码来获取jQuery库： ```...
轮播图轮播过程，导致页面结构轻微抖动问题
qq_15764487的博客
06-10 4079
原因：轮播图的图片大小不一致，解决1：给图片设置block, 固定相同宽高解决2：给轮播图下方的结构一个padding-top值，
移动端轮播图下内容抖动问题
走在秃头的路上的博客
02-18 2017
在用vue写移动端时候发现一个问题，那就是轮播图下方的内容在网速慢（网络是3G）的情况下，会出现抖动，也就是图片加载出来后，test被挤下来 下面是home页面 &lt;home-header&gt;&lt;/home-header&gt; &lt;home-swiper&gt;&lt;/home-swiper&gt;//轮播图 &lt;div&gt;test&lt;/di...
手机端页面在项目中遇到的一些问题及解决办法（持续更新）
weixin_34360651的博客
06-05 1250
1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是： (1) 看是否能把body和html的height: 100%去除掉。 (2) 在滚动的容器中增加：-webkit-overflow-s...
轮播图轮播时的抖动解决方案
热门推荐
吴小迪的博客
07-21 4万+
笔者做项目时遇到了轮播图莫名奇妙的出现了抖动的问题。 根本就不知道为什么它会抖动。 最后给轮播图的外层容器加了一个css样式就解决了抖动的问题。 比如最外层的盒子的类名叫wrapBox，那么我们就只需要给其加上这句css就好了： .wrapBox { transform: translateZ(0); } 这样你就会发现轮播图的抖动问题解决了。 ...
轮播图导致页面字体轻微抖动问题
qq_41239398的博客
03-28 2404
页面轮播图导致页面轻微抖动的问题 由于swipe的时候图片的大小不一致导致的抖动问题 页面加载时 由于浏览器的调试问题 当页面缩小之后导致的文字抖动 解决方案 1.给轮播图盒子一个固定的高度 2.给轮播图下面的padding-top值 3.把页面放大成100%… 由于我用Chrome调试的时候,问了许多大佬都没解决这个问题 然后去看了下原来的app也是这样所以我就不深究了 如果有大佬的话 评论...
解决页面加载轮播图下面的内容抖动问题
QAEARQ的博客
07-13 2932
页面开始加载时，如果网络慢，图片加载会很慢，这是它盒子的高度并没有所以下面的内容会上移，当你的图片加载出来以后，刚刚的内容会下移从而出现抖动问题解决：给图片的盒子加一个初始值，当图片加载出来时，超出部分再隐藏    overflow: hidden    width: 100%    height: 0    padding-bottom: 30% （图片的高度大概）...
vue项目细节优化笔记
boy599237255的博客
11-13 293
1、vue-awesome-swiper轮播图片在3G网络加载时，下面内容出现页面抖动 解决办法： 外层div添加class为wrapper .wrapper{ width: 100%; height: 0; overflow: hidden; padding-bottom: 32.5%;//其中32.5%为图片的宽高比 } //或者方案2（部分浏览器不兼容） ....
前端进击之路——Vue项目使用vue-awesome-swiper轮播插件
ttt_wtw的博客
08-30 1万+
　　最近备战找工作正在自学Vue框架，找到了慕课网Dell Lee老师的Vue2.5开发去哪儿网App 从零基础入门到实战项目课程便开始实战啦！ 　　首页第一个逻辑功能用到的便是轮播图啦，果然前端虽然技术杂，但是开发做起来基本上都是拿别人造好的来用就行，这不，一开始我以为老师会自己写轮播源码，结果老师直接带着我找插件去了~ 　　...
在使用轮播图插件时出现抖动问题
weixin_38168728的博客
09-22 697
今天做一个vue项目，在使用一个轮播图插件时出现了轮播图下面的div抖动问题 什么原因出现的，我也不太确定。百度后有人说是轮播的图片高度不一致导致的，然后各种css样式都来了什么隐藏溢出啊试了一下没一点卵用 后来看见一篇博客说在img标签的上一层div上样式加这个： transform: translateZ(0); ok成功解决。 =========...
解决：使用 swiper 自动轮播图片，当拖动过 swiper 内的内容时，导致不继续自动轮播...
weixin_34352005的博客
04-27 1078
版本为1.3 当使用了 swiper 后： var mySwiper = new Swiper('.banner .swiper-container', { autoplay: 3000, loop: true, pagination: '.swiper-pagination', autoplayDisableOnInteraction : fals...
移动端解决fixed滚动出现抖动的问题
最新发布
05-02
在移动端，当使用fixed定位元素时，滚动页面会出现抖动的问题。这是由于移动设备的浏览器在滚动时会对fixed元素重新定位，从而导致抖动。为了解决这个问题，可以采用以下几种方法： 1. 使用CSS属性-webkit-overflow...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值