vue 无缝滚动

1、创建

<!--
 * @Descripttion: 无缝滚动
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2021-03-22 09:10:16
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-04-18 10:58:16
-->
<template>
  <div class="wrapper">
    <div class="roll-box">
      <ul class="roll-list" :class="{ roll_top: rollConfig.animate }">
        <li v-for="(item, index) in rollConfig.data" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

2、方法

<script>
export default {
  data() {
    return {
      // 滚动配置
      rollConfig: {
        animate: false,
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
      },
    }
  },
  mounted() {
    setInterval(this.showroll, 2000)
  },
  methods: {
    showroll() {
      this.rollConfig.animate = true
      setTimeout(() => {
        this.rollConfig.data.push(this.rollConfig.data[0])
        this.rollConfig.data.shift()
        this.rollConfig.animate = false
      }, 500)
    },
  },
}
</script>

3、样式表

<style lang="scss" scoped>
div,
ul,
li,
span,
img {
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box;
}
.wrapper {
  width: 500px;
  height: 500px;
}

.roll-box {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .roll-list {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    li {
      height: 14.3%;
      box-sizing: border-box;
      padding: 2%;
      border-bottom: 1px solid #343433;
      display: flex;
      justify-content: space-between;
      position: relative;
      background: #0ff;
    }
  }
  .roll_top {
    transition: all 0.5s;
    margin-top: -13.5%;
  }
}
</style>

4、例