小程序swiper高度随内容自适应

在小程序中，如果你想让swiper的高度随内容自适应，你可以通过设置swiper的style属性来实现。以下是一个简单的例子：

index.wxml

<view class="container">
  <swiper style="height: {{swiperHeight}}px;">
    <swiper-item>
      <view class="swiper-item">
        这里是内容 1
      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item">
        这里是内容 2
      </view>
    </swiper-item>
    <!-- 更多 swiper-item -->
  </swiper>
</view>

index.wxss

.container {
  width: 100%;
  overflow: hidden;
}
 
.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 使内容充满swiper-item的高度 */
}

index.js

Page({
  data: {
    swiperHeight: 0 // 初始化swiper的高度
  },
  onLoad: function() {
    this.setSwiperHeight();
  },
  setSwiperHeight: function() {
    const query = wx.createSelectorQuery();
    query.select('.swiper-item').boundingClientRect(data => {
      this.setData({
        swiperHeight: data.height
      });
    }).exec();
  }
});

在这个例子中，.swiper-item 的高度被设置为 100%，这样内容可以充满 swiper-item 的高度。swiper 的 height 通过 JavaScript 动态计算并设置，以适应内容的高度。

请注意，这个方法需要在页面加载后（onLoad 方法中）计算 swiper 的高度，并更新数据绑定。如果内容的高度会变化，你可能需要在数据变化时重新计算并更新 swiper 的高度。