关于vue3 + swiper，设置垂直轮播无效的问题

<div id="swiper-text">
    <Swiper 
        :modules="modules"
        :loop="true"
        :autoplay="{ delay: 2000, disableOnInteraction: false }" 
        :direction="'vertical'" 
        v-if="textList">
        <SwiperSlide v-for="item in textList" :key="item.op_id">
            <div class="item flex items-center justify-start">
                <img :src="item.user_avatar" />
                <p class="flex-1">
                    <span>{{item.user_nickname}}订阅了{{item.nickname}}的方案</span>
                    <span class="scheme-name margin-l-6">{{ item.op_name }}</span>
                </p>
                <span class="time">刚刚</span>
            </div>
        </SwiperSlide>
    </Swiper>
</div>

一开始设置垂直轮播后怎么都不生效，还以为是swiper版本的问题，后面发现不是。我用的版本9的swiper，这个问题的关键点在于一定要给swiper一个固定高度，加上就可以了

#swiper-text {
    :deep(.swiper){
        height: 1.06rem;
    }
}