swiper-box的高度问题

Swiper的高度可以通过CSS设置或者JS动态计算来实现。如果需要动态计算高度，可以使用Swiper的回调函数onSlideChangeEnd，在每次切换Slide后获取当前Slide的高度，然后设置Swiper的高度。示例代码如下：

var mySwiper = new Swiper('.swiper-container', {
    // 其他Swiper参数
    onSlideChangeEnd: function () {
        var curSlide = mySwiper.slides[mySwiper.activeIndex];
        var curHeight = $(curSlide).height();
        mySwiper.wrapper.css('height', curHeight + 'px');
    }
});

注意，这里的$是jQuery库中的$函数，需要在代码中引入jQuery库。

相关问题

uniapp的swiper-box高度怎么自适应

在uni-app中，可以通过设置Swiper的高度为`auto`来实现自适应高度。同时，需要注意的是，Swiper的容器元素也需要设置高度为100%或者根据具体需求设置高度。

示例代码如下：

<template>
  <view class="swiper-container">
    <swiper class="swiper-wrapper" :options="swiperOptions">
      <swiper-item v-for="(item, index) in list" :key="index">
        <!-- Swiper Item 的内容 -->
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        // Swiper Item 的列表数据
      ],
      swiperOptions: {
        // Swiper 的其他配置项
        height: 'auto', // 设置 Swiper 的高度为 auto
      },
    };
  },
};
</script>

<style>
.swiper-container {
  height: 100%; /* 设置 Swiper 容器元素的高度为 100% */
}
</style>

需要注意的是，如果Swiper Item中包含图片等异步加载的元素，可能会导致高度计算不准确，需要在图片等元素加载完成后重新计算高度，可以使用uni-app提供的`@load`事件来实现。

uni-app 中 swiper 轮播图高度自适应

在uni-app中，可以通过以下两种方法实现swiper轮播图的高度自适应：

方法一：
在swiper组件的样式中，设置高度为宽度的一定比例。具体来说，可以使用calc()函数来计算高度，公式为：swiper高度 = swiper宽度 * 原图高度 / 原图宽度。例如：

<swiper class="swiper-box" indicator-dots autoplay circular>
  <swiper-item v-for="(item, i) in imgList" :key="i">
    <image style="width: 100%" :src="item" mode="widthFix" />
  </swiper-item>
</swiper>

.swiper-box {
  width: 100%;
  height: calc(100vw * 9 / 16);
}

方法二（推荐）：
使用uni-app提供的自定义组件swiper-plus，该组件可以自动计算图片的宽高比，并根据宽度自适应高度。具体使用方法可以参考uni-app官方文档。