vue实现无缝跑马灯

结合代码说说实现原理吧。
HTML部分

 


    

      
      

        
        
金融大数据处理职业课程{{ index }}
      
       
      

        
        
金融大数据处理职业课程{{ index }}
      
    
  

js部分代码

export default {
  name: "competition-dynamics",
  data() {
    return {
      dataList: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
      timer: null,
      box: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //元素超过4个之后才开始新建定时器实现滚动
    init() {
      if (this.dataList.length > 4) {
        this.box = this.$refs.wrapper;
        this.timer = setInterval(() => {
          this.move();
        }, 10);
      }
    },
    // 跑马灯工作
    move() {
      let curLeft = this.box.scrollLeft;
      //父盒子总宽度除以2 (20是我这边盒子之间的右边距)
      let scrollWidth = this.$refs.marquee.scrollWidth / 2 + 20;
      this.box.scrollLeft = curLeft + 1;
      if (curLeft > scrollWidth) {
        this.box.scrollLeft = 0;
      }
    },
    //鼠标悬停
    mouseover() {
      clearInterval(this.timer);
      this.timer = null;
    },
    //鼠标离开，继续滚动
    mouseout() {
      this.init();
    },
  },
  //销毁定时器
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};

css部分代码

从上面代码不难看出相对于原生的js,使用vue实现无缝连接的跑马灯要相对容易的多。首先是使用ref拿到父盒子的scrollLeft，再和其中的一个滚动盒子的内容宽度进行对比。如果父盒子的scrollLeft超过一个滚动盒子的内容宽度就置0从头开始，这样就可以实现无缝对接了。其次，如果需要鼠标悬停的也非常简单，mouseover()方法清除定时器即可，鼠标离开重新开始，mouseout()方法内重新调用init()方法即可。真的是省时省力太便捷了。
ps:页面销毁前记得清除定时器呀，beforeDestroy()中调用清除就行啦。内容较简单先这样吧，本篇over~下次见！