vue实现单条消息无缝滚动

使用插件 

npm install vue-seamless-scroll --save

在mian.js中引用
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

HTML代码：

<vue-seamless-scroll
      :data="listData"
      style="height: 200px;overflow: hidden;"
      :class-option="defaultOption"
    >
      <div
        v-for="(item,i) in listData"
        :key="i"
      >
        <span
          class="title"
          v-text="item.title"
        ></span><span
          class="date"
          v-text="item.date"
        ></span>
      </div>
    </vue-seamless-scroll>

 js代码：

data () {
    return {
      listData: [{
        title: '无缝滚动第一行',
        date: '2021-09-16'
      }, {
        title: '无缝滚动第二行',
        date: '2021-09-16'
      }, {
        title: '无缝滚动第三行',
        date: '2021-09-16'
      }, {
        title: '无缝滚动第四行',
        date: '2021-09-16'
      }, {
        title: '无缝滚动第五行',
        date: '2021-09-16'
      }, {
        title: '无缝滚动第六行',
        date: '2021-09-16'
      }, {
        title: '无缝滚动第七行',
        date: '2021-09-16'
      }, {
        title: '无缝滚动第八行',
        date: '2021-09-16'
      }, {
        title: '无缝滚动第九行',
        date: '2021-09-16'
      }]
    }
  },
// 监听属性 类似于data概念
  computed: {
    defaultOption () {
      return {
        step: 0.6, // 数值越大速度滚动越快
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },

不使用插件 

<template>
  <div>
    <div class="textBox">
      <transition name="slide">
        <p class="text" :key="text.id">{{text.val}}</p>
      </transition>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'scroll',
  data () {
    return {
      textArr: [
        '1 第一条数据',
        '2 第二条数据',
        '3 第三条数据'
      ],
      number: 0
    }
  },
  computed: {
    text () {
      return {
        id: this.number,
        val: this.textArr[this.number]
      }
    }
  },
  mounted () {
    this.startMove()
  },
  methods: {
    startMove () {
      // eslint-disable-next-line
      let timer = setTimeout(() => {
        if (this.number === 2) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
    }
  }
}
</script>
 
<style scoped>
  .textBox {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    position: relative;
    text-align: center;
  }
  .text {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .slide-enter-active, .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter{
    transform: translateY(20px) scale(1);
    opacity: 1;
  }
  .slide-leave-to {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
  }
</style>