微信小程序中swiper组件高度根据图片自适应

最新推荐文章于 2022-07-28 15:21:52 发布

king-w

最新推荐文章于 2022-07-28 15:21:52 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_33401924/article/details/88421834

本文探讨了如何在微信小程序中实现swiper组件的高度根据图片内容自适应，并介绍了在wxss中设置过渡动画以确保平滑切换的方法。

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

wxml：

<!-- banner图 -->
    <swiper style="height:{
  
  {imgHeight[current]}}rpx;" bindchange="bindchange">
      <block wx:for="{
  
  {imgUrls}}" wx:key="that">
        <swiper-item>
          <image src="{
  
  {item.img_url+webp}}" class="slide-image" mode='aspectFill' data-url="{
  
  {item.link}}" bindload="imageLoad" bindtap='goto' data-id="{
  
  {index}}" />
        </swiper-item>
      </block>
    </swiper>

wxss:：由于swiper的高度在变化，所以需要加一个过渡动画。

.swiper-box {
  position: relative;
  transition: height ease-out 0.2s; 
}

.slide-image {
  width: 100%;
  height: 100%;
}

js：

data: {
    //所有图片的高度  
    imgHeight: [],
    //图片宽度 
    imgwidth: 750,
    //默认  
    current: 0
  },
imageLoad: function (e) {//获取图片真实宽度  
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      //宽