uniapp中如何设置swiper的高度自适应

最新推荐文章于 2026-03-08 00:24:41 发布

原创

最新推荐文章于 2026-03-08 00:24:41 发布 · 3k 阅读

收录于

当前文章被以下社区和专栏收录：

文章讲述了在uniapp中使用swiper组件遇到的需要固定高度的问题，以及解决方案。通过在每次滑动切换时动态获取swiper-item内DOM元素的高度，并将其设置给swiper，从而实现内容自适应高度的功能。

uniapp中的swiper组件可以用来做滑动切屏，但是不好的在于必须设置一个固定高度，对于在每一个swiper-item里的内容可能不一定的情况，就会造成内部的内容不能自动撑开。

一、解决思路

1.在每次滑动切换的时候，动态地获取swiper-item内部的DOM的元素的高度。
2.将获取的高度动态设置给swiper元素。

二、代码

<template>
  <view>
    <swiper
      :autoplay="false"
      @change="changeSwiper"
      :current="currentIndex"
      :style="{ height: swiperHeight + 'px' }"
    >
      <swiper-item v-for="(item, index) in dataList" :key="item.id">
        <view :id="'content-wrap' + index">
            每一个swiper-item的内容区域
            ....
        </view