vue文字间歇无缝向上滚动

Posted 2022-12-07 tnnyang

公司的管理系统中有“文字间歇无缝向上滚动”的需求，现在这种需求基本在项目开发中已经消失了，没什么新颖的，但架不住公司高层喜欢这种玩意儿，所以，作为开发人员，即使你有一百个不乐意，谁让是人家给你发工资呢！！！

其实，这种用在vue项目中的需求跟原生js的实现方法基本一致，且实现的方法有多种，今天就单拎出来一种实现方法吧：

<div class="scroll-up" ref="scroll">
      <ul>
        <li v-for="item in scrollData" :key="item.id"><router-link to="">item.title</router-link></li>
      </ul>
    </div>

export default 
  data() 
    return 
      scrollData: [
         id: 1, title: '架不住公司高层喜欢这种玩意儿' ,
         id: 2, title: '用在vue项目中的需求跟原生js的实现方法' ,
         id: 3, title: '文字间歇无缝向上滚动' ,
         id: 4, title: '即使你有一百个不乐意，谁让是人家给你发工资呢' ,
         id: 5, title: '今天就单拎出来一种实现方法' ,
      ],
      scrollArea: '',
      speed: 20,
      timer: null,
      delay: 3000,
      liHeight: '',
    ;
  ,
  mounted() 
    this.$nextTick(() => 
      this.scrollArea = this.$refs.scroll;
      let li = this.scrollArea.getElementsByTagName("li");
      this.liHeight = li[0].offsetHeight;
      this.scrollArea.scrollTop = 0;
      this.scrollArea.innerhtml += this.scrollArea.innerHTML;

      setTimeout(this.startScroll, this.delay);
    )
  ,
  methods: 
    startScroll()
      this.timer = setInterval(this.scrollUp, this.speed);
      this.scrollArea.scrollTop++;
    ,
    scrollUp()
      if(this.scrollArea.scrollTop % this.liHeight == 0)
        clearInterval(this.timer);
        setTimeout(this.startScroll, this.delay);
      else
        this.scrollArea.scrollTop++;
        if(this.scrollArea.scrollTop >= this.scrollArea.scrollHeight / 2)
          this.scrollArea.scrollTop = 0;
        
      
    ,
  

<style scoped>
.scroll-upheight:50px;line-height:50px;overflow:hidden;
</style>

就酱！