微信小程序轮播图高度自适应优化

toooooop82025-12-13 13:51

html 复制代码

  <view class="swiper-wrap">
    <swiper indicator-dots circular class="swiper" style="height: {{swiperHeight}}">
      <swiper-item wx:for="{{imgList}}" wx:key="this">
        <view class="img-box">
          <image src="{{item}}" mode="widthFix" class="swiper-img" />
        </view>
      </swiper-item>
    </swiper>
  </view>

javascript 复制代码

const app = getApp()

Page({
  data: {
    imgList : [
      'http://siyuds.cc/uploads/attach/2025/12/20251212/de6e6a90ec0e47b7a249e6dd097ae3db.jpg',
      'http://siyuds.cc/uploads/attach/2025/12/20251212/7d4d78ce86f485abf4ea09ab4c105f6b.png',
      'http://siyuds.cc/uploads/attach/2025/12/20251212/f55161f8af944c62c78d2ef2d184e70b.png'
    ],
    swiperHeight:230
  },
  onLoad() {
    console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
 
    this.getElementTop();
  },
  

    getElementTop() {
      let that = this;
      setTimeout(() => {
        wx.createSelectorQuery()
          .in(this)
          .select(".swiper-img")
          .boundingClientRect((data) => {
            console.log(data)
            if (data) {
              // that.swiperHeight = data.height + 30;
              this.setData({ swiperHeight: data.height + 'px' });
            }
          })
          .exec();
     }, 0);
  },
  
})

css 复制代码

.swiper-wrap {
  width: 100%;
  box-sizing: border-box;
  height:200px
}
.swiper {
  width: 100%;
  height:auto;
}
.img-box {
  width: 100%;
  margin: 0;
  padding: 0;
}
.swiper-img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

css这里主要是设置swiper的高度自动，覆盖默认的150px