代码先锋网 代码片段及技术文章聚合

 今天接到任务要我实现下图的第三种文字效果实在没有思路,于是百度了好久.找到了几种实现方法,其中也有插件.

第一种方法:

参考文章

1. 对整个列表实现上移动画
2. 将列表的第一个数据移动到最后一个

因为vue是基于数据驱动的，所以，对我们开发者来说，直接操控数组，删除第一个数组数据，然后追加到数组后面就好了。

template 部分

  <!-- 无缝滚动效果 -->
  <div class="marquee-wrap">
    <ul class="marquee-list" :class="{'animate-up': animateUp}">
      <li v-for="(item, index) in listData" :key="index">{{item}}</li>
    </ul>
  </div>
  

script部分

export default {
  name: "marquee-up",
  data() {
    return {
      animateUp: false,
      listData: ['12***ve 成功邀请12人 已获奖金60元', 'l***e 成功邀请5人 已获奖金40元', 'l***e 成功邀请1人 已获奖金5元'],
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(this.scrollAnimate, 1500);
  },
  methods: {
    scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.listData.push(this.listData[0])
        this.listData.shift()
        this.animateUp = false
      }, 500)
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }
};

style 部分

.marquee-wrap  {
  width: 80%;
  height: 40px;
  border-radius: 20px;
  background: rgba($color: #000000, $alpha: 0.6);
  margin: 0 auto;
  overflow: hidden;
  .marquee-list {
    li {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 20px;
      list-style: none;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      font-weight: 400;
    }
  }
  .animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-40px);
  }
}

如果只是照搬代码而没有去理解,也是没有意思的.所以以下是自己的理解

首先mounted是在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

所以这是在html渲染后的第一步操作就是以1500毫秒不停的调用scrollAnimate这个方法

首先animateUp是一开始定义好的为false在调用scrollAnimate这个方法时为真了.我们看template可以看到这个是class是否有效.也就是说为真时class有效.

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

push是在尾部增加第一条数据,shift删除数组中的第一个项目

第二种方法:插件:vueloopscroll

第三种方法:插件Animate

第四种方法:插件vue-seamless-scroll

第五种方法:chenxuan0000