vue文字间歇无缝向上滚动

标签：data   nextTick   公司   def   int   项目   else   default   v-for   

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

其实，这种用在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-up{height:50px;line-height:50px;overflow:hidden;}
</style>

就酱！

vue文字间歇无缝向上滚动

标签：data   nextTick   公司   def   int   项目   else   default   v-for   

原文地址：https://www.cnblogs.com/tnnyang/p/11613654.html