解决swiper@6.8.4中swiper高度的问题

最新推荐文章于 2025-09-10 00:39:14 发布

原创

最新推荐文章于 2025-09-10 00:39:14 发布 · 4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #swiper高度过大

本文详细讲述了在Swiper 6.8.4中遇到的高度问题，即swiper-container和swiper-slide高度异常。通过调整autoHeight配置和使用height属性，作者揭示了解决方案，包括设置固定高度和百分比应用，适用于手机端的动态适应。

说明

本文是关于swiper@6.8.4中出现的问题，其他版本未知。

出现的问题是 swiper-container和swiper-slide的高度远远超出最外层盒子的高度，

而且这个高度非常的离谱。本文就是为了解决这个问题，以及说明一些关于高度的配置。

本次轮播图示例是上下轮播的。

问题阐述

这是封装好的一个轮播图：

export const SwiperComp = (props) => {
   
   
    const {
   
    datas, texts } = props
    return <Swiper
        autoplay
        loop
        direction="vertical"
        observer
        observeParents
        observeSlideChildren
    >
        {
   
   
            datas && datas.map((item, index) => {
   
   
                return <SwiperSlide key={
   
   index}>
                    // ...
                </SwiperSlide