uniapp在<swiper>轮播图里面拿到图片最大高度 定为swiper的高度

在uni-app中，`<swiper>` 组件是一个常用的轮播组件，它允许你创建一个滑动的轮播图。由于`<swiper>` 组件的子元素默认高度是自适应内容的，如果你需要在轮播图中拿到图片的最大高度并将其设置为`<swiper>` 的高度，你可以通过Vue的数据绑定和生命周期钩子来实现。

以下是一个简单的示例代码：

<template>
  <swiper class="swiper" :style="{ height: maxHeight + 'px' }">
    <swiper-item v-for="(item, index) in imageList" :key="index">
      <image :src="item.url" class="slide-image" @load="handleImageLoaded"></image>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        // 图片数组，每个元素包含url属性
      ],
      maxHeight: 0 // 用于存储最大图片高度
    };
  },
  methods: {
    handleImageLoaded(event) {
      // 当图片加载完成后执行
      const imageHeight = event.target.height;
      // 比较并记录最大高度
      if (imageHeight > this.maxHeight) {
        this.maxHeight = imageHeight;
      }
    }
  },
  mounted() {
    // 组件挂载后执行，此时所有子组件的created钩子已经执行完毕
    // 可以在这里获取初始的最大高度
    this.setMaxHeight();
  },
  watch: {
    // 监听imageList的变化，如果有新的图片被加载，重新获取最大高度
    imageList() {
      this.setMaxHeight();
    }
  },
  methods: {
    setMaxHeight() {
      let maxHeight = 0;
      this.imageList.forEach(item => {
        const image = new Image();
        image.onload = () => {
          if (image.height > maxHeight) {
            maxHeight = image.height;
          }
          // 所有图片加载完毕后更新高度
          if (this.imageList.every(img => img._loaded)) {
            this.maxHeight = maxHeight;
          }
        };
        image.onerror = () => {
          // 处理图片加载出错的情况
        };
        image.src = item.url;
        item._loaded = false; // 标记图片尚未加载完成
      });
    }
  }
};
</script>

<style>
.swiper {
  width: 100%;
}
.slide-image {
  width: 100%;
  height: auto; /* 默认图片高度自适应 */
}
</style>

在上面的代码中，我们使用了`:style` 绑定来动态设置`<swiper>` 的高度，并通过`handleImageLoaded` 方法来监听每张图片的加载完成事件，以此来获取图片的实际高度。当所有图片都加载完成后，我们使用`setMaxHeight` 方法来更新`maxHeight` 的值，从而更新`<swiper>` 的高度。

请注意，由于图片加载是异步的，所以设置最大高度的操作需要确保所有图片都加载完成后再进行。上面的代码示例是一个基本的实现思路，实际情况中可能需要根据具体的业务逻辑进行调整。