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

在uniapp中，`<swiper>` 组件是用于创建轮播图的一个常用组件。如果你想要在轮播图中获取图片的最大高度，并将这个高度设置为`<swiper>`的高度，你可以通过动态数据绑定的方式来实现。

首先，你需要有一个数组来存储所有的轮播图图片地址。然后，你可以通过遍历这个数组来获取每张图片的尺寸。获取图片尺寸通常需要借助于图片加载完成的事件来实现，比如在图片的`onLoad`事件中获取图片的自然高度。

这里有一个简单的例子：

<template>
  <swiper :style="swiperStyle">
    <swiper-item v-for="(item, index) in imageUrls" :key="index">
      <image :src="item" @load="handleImageLoaded(index)"></image>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      imageUrls: [
        'http://example.com/image1.jpg',
        'http://example.com/image2.jpg',
        // ...更多图片
      ],
      maxHeight: 0,
      // 存储每张图片的高度
      imageHeights: []
    };
  },
  computed: {
    // 根据获取到的最大图片高度动态设置swiper的高度
    swiperStyle() {
      return {
        height: this.maxHeight + 'px'
      };
    }
  },
  methods: {
    handleImageLoaded(index) {
      const image = this.$refs[`image${index}`];
      const height = image.height; // 获取图片高度
      if (height > this.maxHeight) {
        this.maxHeight = height; // 更新最大高度
      }
      this.imageHeights[index] = height; // 存储每张图片的高度
    }
  },
  mounted() {
    // 组件挂载后获取所有图片高度并更新最大高度
    this.imageUrls.forEach((url, index) => {
      const image = new Image();
      image.onload = () => {
        this.handleImageLoaded(index);
        // 检查是否所有图片都已经加载完成
        if (this.imageHeights.length === this.imageUrls.length) {
          this.maxHeight = Math.max(...this.imageHeights);
        }
      };
      image.src = url;
    });
  }
};
</script>

在这个例子中，我们在`<image>`组件上绑定了`onLoad`事件处理函数`handleImageLoaded`，当图片加载完成后，会计算图片的高度并更新`maxHeight`。在所有图片都加载完成后（在`mounted`钩子中检查），我们使用`Math.max`方法找出最高的图片高度，并更新`swiperStyle`计算属性中的高度，从而动态设置`<swiper>`的高度。