uniapp swiper轮播图自适应高度问题

Question

uniapp swiper轮播图自适应高度问题 ：

通过获取设备信息，和图片宽高度信息，计算出swiper的高度，但是却无法动态实现swiper高度，轮播图高度一直都是默认高度,这是什么问题，

Answer 1

如果使用 Uniapp 的 swiper 组件实现轮播图自适应高度，但是无法动态实现轮播图高度，可能是因为绑定的数据没有及时刷新。

可以通过以下几种方法解决这个问题：

1. 使用 Vue.js 的 $nextTick 方法，在数据更新后重新计算高度：

this.$nextTick(() => {
  // 计算高度
})

1. 使用 Uniapp 的 vue-lazyload 插件，在图片加载完成后重新计算高度：

<image v-lazy="item.src" @load="handleLoad"/>

methods: {
  handleLoad() {
    // 计算高度
  }
}

1. 使用 CSS 媒体查询，根据屏幕宽度计算高度：

<swiper :style="{height: swiperHeight + 'px'}">

computed: {
  swiperHeight() {
    const windowWidth = uni.getSystemInfoSync().windowWidth
    return windowWidth * 0.56
  }
}

希望这些信息能够帮助您解决问题。