在Vue中，用于实现图片列表的自动滚动效果_vue实现图片滚动

给div添加2个事件，用于暂停和继续； 

<divref="imgListBox"@mouseenter="handleImgListMouseEnter"
@mouseleave="handleImgListMouseLeave"
><img/></div>

 
startAutoScroll(length) {
      this.handleImgListMouseEnter();
      let num = 0;
      let scrollDistance = 0;
      this.imgListTime = setInterval(() => {
        num++;
        if (num >= length - 4) num = 0;
        scrollDistance = 350 * num;
     
        this.animateScroll(scrollDistance);
      }, 2000);
    },
    handleImgListMouseEnter() {
      if (this.imgListTime) clearInterval(this.imgListTime);
    },
    handleImgListMouseLeave() {
      this.startAutoScroll(this.imgList.length);
    },
    animateScroll(scrollLeft) {
          let start = null;
          let that=this
          function step(timestamp) {
            if (!start) start = timestamp;
            const progress = timestamp - start;
            const scrollDistance = 350;
            const easeInOutQuad = t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
 
            that.$refs.imgListBox.scrollLeft = (scrollLeft-350) + scrollDistance * easeInOutQuad(Math.min(progress / 1000, 1));
 
            if (progress < 1000) {
              requestAnimationFrame(step);
            }
          }
 
          requestAnimationFrame(step);
        },