uni-app 实现多条消息垂直跑马灯，若消息过长则先水平滚动完整展示后再垂直滚动下一条

在 uni-app 中实现多条消息的垂直跑马灯效果，并且当消息过长时先水平滚动完整展示后再垂直滚动下一条，可以通过以下步骤实现：

1. 使用 swiper 和 scroll-view 组件

• swiper 用于实现垂直滚动。
• scroll-view 用于实现水平滚动。

2. 实现思路

• 使用 swiper 组件包裹多个 scroll-view，每个 scroll-view 对应一条消息。
• scroll-view 设置为水平滚动，当消息过长时，用户可以水平滚动查看完整内容。
• swiper 设置为垂直滚动，当一条消息展示完毕后，自动切换到下一条消息。

3. 代码示例

<template>
  <view class="container">
    <swiper
      class="swiper"
      :vertical="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(message, index) in messages" :key="index">
        <scroll-view
          class="scroll-view"
          scroll-x="true"
          scroll-with-animation
          @scroll="onScroll"
        >
          <text class="message">{{ message }}</text>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        "这是一条短消息",
        "这是一条较长的消息，需要水平滚动才能完整展示",
        "这是另一条消息",
        "这是最后一条消息"
      ]
    };
  },
  methods: {
    onSwiperChange(e) {
      console.log("当前消息索引:", e.detail.current);
    },
    onScroll(e) {
      console.log("水平滚动位置:", e.detail.scrollLeft);
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100%;
}

.scroll-view {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.message {
  display: inline-block;
  line-height: 100px;
  font-size: 16px;
  color: #333;
}
</style>