微信小程序 swiper高自适应，展示完整图片

最新推荐文章于 2025-05-19 14:53:27 发布

zhaohanqq

最新推荐文章于 2025-05-19 14:53:27 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 swiper 高度自适应

本文链接：https://blog.youkuaiyun.com/zhaohanqq/article/details/84256557

微信小程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用Swiper组件使图片在不同屏幕尺寸下自适应显示，通过动态设置Swiper高度来确保图片完整且不失真。代码示例展示了如何根据图片原始尺寸和屏幕宽度计算并设置正确的高度。

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

swiper默认的高度是150px

swiper宽度100%，高度按图片宽高和屏幕宽度比例设置，另外也要设置土坯那宽度100%，图片宽度和屏幕宽度一致，这样图片不变性/完整显示，代码如下：

<view class='swiper-box'>
  <swiper class='index-swiper' indicator-dots autoplay circular indicator-active-color="#f45f00"      interval="2000" style='width:100%;height:{{heig}}'>
    <swiper-item wx:for="{{imageUrl}}">
      <image src='{{item}}' mode='widthFix' class='index-swiper-image' bindload="imageLoad"/>
    </swiper-item>
  </swiper>
</view>

imageLoad:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth; //获取屏幕宽度
    var imgWid = e.detail.width; //图片高度
    var imgHeg = e.detail.height; //图片高度
    this.setData({
      heig: winWid * imgHeg / imgWid + 'px'
    })
  }