scss 走马灯效果（兼容微信小程序）

<template>
  <view class="marquee">
    <view class="marquee-inner">
      <span v-for="(item, index) of textList" :key="index">{{ item.text }}</span>
      <!-- 复制一份内容 -->
      <span v-for="(item, index) of textList" :key="'duplicate-' + index">{{ item.text }}</span>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 默认值为空数组
    textList: {
      type: Array,
      default: () => [
        {
          text: 'Hello, world!',
        },
        {
          text: 'Hello, world1111111111111111!',
        },
        {
          text: 'Hello, world!',
        },
        {
          text: 'Hello, world11111!',
        },
        {
          text: 'Hello, world!',
        }
      ]
    }
  },
  components: {

  },
  computed: {

  },
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {

  },
  beforeDestroy() {

  },
  methods: {

  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
.marquee {
  overflow: hidden;
  width: 100%;
  height: 45rpx;
  line-height: 45rpx;
  font-size: 20rpx;
  color: #FCDEB5;
  white-space: nowrap;
  padding-left: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  .marquee-inner { /* 添加一个新的内部容器用于放置重复内容 */
    display: flex;
    flex-wrap: nowrap;
    animation: marquee 15s linear infinite;

    > span {
      display: inline-block; /* 改为 inline-block 以便多个项在同一行 */
      background-color: rgba(250, 223, 168, 0.2);
      border-radius: 20rpx;
      margin-left: 69rpx;
      padding: 0 20rpx;
      :nth-of-type(1) {
        margin-left: 0;
      }
      &:last-child {
        margin-left: -69rpx;
      }
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }
}
</style>