想要实现图中的文字切换效果

[xiaoyao20084321]

清晰简洁的描述你的需求

如上图所示，我想要实现这种效果。但是我现在实现起来有个问题，因为我想要最大6个item在一屏展示，如果item的文字过多，导致一屏幕显示6个的时候会出现文字换行的情况出现。

能不能变成，最大6个item在一屏展示。如果文字过多超出一屏幕，就自动变成5个item或者更少在一屏展示，而不是把item换行 下面是我目前实现的有问题的效果和我的代码

<template>
    <view class="content" style="background-color: rgba(56, 56, 56, 0.8);">
        <z-swiper v-model="list" :options="{ slidesPerView: 6, centeredSlides: true }">
            <z-swiper-item v-for="(item,index) in list" :key="index">
                <view style="color: white; text-align: center; font-size: 28rpx;">
                    {{item}}
                </view>
            </z-swiper-item>
        </z-swiper>
    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue'
    const list = ref([
        '特选（T1）',
        '薪传（T1.5）',
        '标准（T2）',
        '先驱',
        '摩登',
        '纯铁',
    ])
</script>

此需求你建议怎样实现

No response

可提供的案例或参考对象

No response