uniapp swiper 高度自适应

在uniapp中，可以通过以下两种方法实现swiper高度自适应：

方法一：使用图片的宽高比例来计算swiper的高度。

<template>
  <view>
    <swiper :style="{height: swiperHeight + 'px'}">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <image :src="item.url" mode="aspectFit" @load="getImageHeight"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [
        { url: '图片1的url' },
        { url: '图片2的url' },
        { url: '图片3的url' }
      ],
      swiperHeight: 0
    }
  },
  methods: {
    getImageHeight(event) {
      const { width, height } = event.mp.detail
      const ratio = 750 / width // 750是设计稿的宽度
      this.swiperHeight = height * ratio
    }
  }
}
</script>

方法二：使用scroll-view来包裹swiper，并设置scroll-view的高度为100%。

<template>
  <view>
    <scroll-view :style="{height: '100%'}">
      <swiper>
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image :src="item.url" mode="aspectFit"></image>
        </swiper-item>
      </swiper>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [
        { url: '图片1的url' },
        { url: '图片2的url' },
        { url: '图片3的url' }
      ]
    }
  }
}
</script>

这两种方法都可以实现swiper高度的自适应，你可以根据具体的需求选择其中一种方法来使用。