vue文字间歇无缝向上滚动

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

其实，这种用在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;

      this. scrollData.length > 1 && 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文字间歇无缝向上滚动

最新文章

热门文章