框架轮播图的自适应高度

最新推荐文章于 2025-05-01 08:38:22 发布

*初级小白*~

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量701

点赞数 2

分类专栏： Vant 文章标签： javascript html5 css3

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/121335999

版权

Vant 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用HTML5和CSS3技术来创建一个框架轮播图，并实现其高度根据内容自适应。通过利用Flexbox布局和JavaScript动态调整高度，确保了在不同设备上展示效果良好。

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

  <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred" :style="{height:h}">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" alt="" width="100%" style="display:'block'">
      </van-swipe-item>
    </van-swipe>

export default {
  data() {
    return {
      h: '210px',
    }
  },
  mounted(){
    //根据屏幕的高度，动态的计算轮播图容器的高度 设置data.h
    let screenW=window.screen.width; //屏幕的宽
    let picW= 750; //图片的宽
    let picH= 400; //图片的高
    let swipeH=Math.floor(picH * screenW / picW)+'px';
    this.h=swipeH;
  }
}