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

说明

本文是关于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>
            })
        }
    </Swiper>
}

这是轮播图最外层盒子的宽高：

离谱的事情出现了：

swiper-slide的高度是5652px！！！

更离谱的是swiper-container的高度是 67824px！！！

简直离谱！

轮播图是正常轮播的，只是打开控制台后才发现这个高度的问题。

---

心路历程及解决

问题已经发现，于是，上swiper官网查配置项。

刚开始以为是自适应高度出了问题，

于是给代码添加了autoHeight，让轮播图高度自适应。

然后再次打开控制台，查看高度：

可见，高度已经小了很多，没那么离谱了。

然而，这个数字仍然是最外层盒子高度的10多倍， 这仍然很不合理。

既然思路是正确的，所以问题可以直接锁定，是高度设置出现了问题！

于是，继续查api文档，发现一个配置项height

发现官网示例中有这么一句注释：

所以，问题很明了了，直接设置高度就行了，

所以 给代码加上高度：

export const SwiperComp = (props) => {
    const { datas, texts } = props
    return <Swiper
        autoplay
        loop
        direction="vertical"
        observer
        observeParents
        observeSlideChildren
        height={40}
    >
        {
            datas && datas.map((item, index) => {
                return <SwiperSlide key={index}>
                    恭喜<span className='report-name'>{item.userName}</span>{texts}<span>{item.awardName}</span>
                </SwiperSlide>
            })
        }
    </Swiper>
}

再次打开控制台，可以清楚的看到，swiper-slide的高度就是我们刚才设置的40px

也就是说，当轮播图是上下播放时，我们需要给轮播图设置这个高度，

这个高度就是swiper-slide的高度，单位是px。

然而，在手机端却不能这样直接设置一个固定高度，

因为手机端的盒子的宽高都会根据手机屏幕的尺寸的不同而有不同。

所以，我们不能直接用height={number}的形式来设置，

由于我们在最外层盒子上已经设置了高度，

所以 此时swiper-slide的高度其实就是最外层盒子的高度，

我们可以用style内联样式的形式来设置。

就像这样：

export const SwiperComp = (props) => {
    const { datas, texts } = props
    return <Swiper
        autoplay
        loop
        direction="vertical"
        observer
        observeParents
        observeSlideChildren
        style={{height: '100%'}}
    >
        {
            datas && datas.map((item, index) => {
                return <SwiperSlide key={index}>
                    恭喜<span className='report-name'>{item.userName}</span>{texts}<span>{item.awardName}</span>
                </SwiperSlide>
            })
        }
    </Swiper>
}

再次打开控制台，可以看到最终效果：

高度符合预期。

只不过这个高度是默认取整的。

---