uni-app 无缝连接单行文字纵向 横向走马灯

在 uni-app 中实现单行文字的无缝连接纵向和横向走马灯效果，可以结合 swiper 组件和 CSS 动画来完成。以下是一个简单的代码示例，展示了如何实现这一效果。

纵向走马灯效果

首先，创建一个纵向走马灯效果。这里我们使用 swiper 组件并设置 vertical 属性为 true。

<template>
  <view class="container">
    <swiper
      class="swiper-vertical"
      vertical="true"
      autoplay="true"
      interval="3000"
      duration="500"
      circular="true"
    >
      <swiper-item v-for="(item, index) in items" :key="index">
        <view class="swiper-item">{{ item }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['文字1', '文字2', '文字3', '文字4']
    };
  }
};
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-vertical {
  width: 80%;
  height: 200px;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
}
</style>

横向走马灯效果

接下来，创建一个横向走马灯效果。这里我们同样使用 swiper 组件，但不设置 vertical 属性。

<template>
  <view class="container-horizontal">
    <swiper
      class="swiper-horizontal"
      autoplay="true"
      interval="3000"
      duration="500"
      circular="true"
    >
      <swiper-item v-for="(item, index) in items" :key="index">
        <view class="swiper-item-horizontal">{{ item }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style>
.container-horizontal {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-horizontal {
  width: 80%;
  height: 100%;
}

.swiper-item-horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #333;
}
</style>

组合使用

若要实现无缝连接的单行文字纵向和横向走马灯效果，可以将两个 swiper 组件嵌套或分别放置在页面的不同位置，根据实际需求进行布局。上述代码分别展示了如何实现纵向和横向走马灯效果，可以根据页面布局需求进行组合和调整。

注意：在实际项目中，你可能需要进一步优化动画效果、处理边界情况等。此外，uni-app 支持多种平台，确保在不同平台上测试走马灯效果的一致性也很重要。