移动端轮播图下内容抖动问题

最新推荐文章于 2022-11-30 21:26:42 发布

旧城爱

最新推荐文章于 2022-11-30 21:26:42 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：随笔

本文链接：https://blog.youkuaiyun.com/weixin_44442095/article/details/87614913

在使用Vue开发移动端应用时，遇到轮播图下方内容在网络速度慢（如3G网络）时出现抖动的问题。内容在图片加载后会被挤压到下方。通过在轮播图外添加一个div并设置特定样式，可以解决此问题，避免内容抖动，确保布局稳定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用vue写移动端时候发现一个问题，那就是轮播图下方的内容在网速慢（网络是3G）的情况下，会出现抖动，也就是图片加载出来后，test被挤下来
下面是home页面

<home-header></home-header>
      <home-swiper></home-swiper>//轮播图
      <div>test</div> //测试内容

这是轮播图代码

<template>
  <swiper :options="swiperOption" >
    <!-- slides -->
    <swiper-slide><img class="swipe-img" src="http://img1.qunarzz.com/piao/fusion/1706/b8/a8e8ff02b094c802.jpg_750x200_ddaec8e5.jpg" alt=""></swiper-slide>
    <swiper-slide><img class="swipe-img" src="http://img1.qunarzz.com/piao/fusion/1811/29/2a6b77b6ff72402.jpg_750x200_d4cec568.jpg" alt=""></swiper-slide>
    <swiper-slide><img class="swipe-img" src="http://img1.qunarzz.com/piao/fusion/1812/d6/daa880b254940402.jpg_750x200_b114308a.jpg" alt=""></swiper-slide>
    <swiper-slide><img class="swipe-img" src="http://img1.qunarzz.com/piao/fusion/1706/b9/6b91b49794f46402.