如何使 UniApp 中的 Swiper 组件实现高度自适应布局？

在UniApp中，要让Swiper组件实现高度自适应布局，你可以采用以下方法：

1. **设置视口单位**: 使用`vh`视口单位来设置Swiper的高度，`vh`表示视口高度的百分比，这将使其随设备屏幕大小动态调整。

<swiper :height="uni.$size.innerHeight * 0.8" @ready="onReady">
  <!-- swiper 内部内容 -->
</swiper>

在这个例子中，`uni.$size.innerHeight * 0.8`会使Swiper高度等于屏幕高度的80%。

2. **绑定数据动态调整**：如果你希望根据某些条件动态改变高度，可以将高度值绑定到Vue的数据属性上，然后在计算属性中基于实际情况计算。

<swiper :height="swiperHeight" @ready="onReady">
  ...
</swiper>

<script setup>
import { watch } from 'vue';

const swiperHeight = computed(() => {
  // 根据业务逻辑计算高度，例如窗口尺寸、屏幕方向等
  return window.innerHeight * 0.9;
});

function onReady() {
  // 初始化完成后的回调，这里可以更新Swiper的高度
}
</script>

3. **监听窗口变化事件**：通过监听窗口resize事件，当窗口大小发生变化时实时更新Swiper的高度。

mounted() {
  window.addEventListener('resize', () => {
    this.swiperHeight = window.innerHeight * 0.9;
  });
},
beforeDestroy() {
  window.removeEventListener('resize', this.updateSwiperHeight);
}