【功能记录】在vue中实现无缝滚动列表

• 先看template中的代码, 我这里是放了两个一模一样的dom，而这个dom就是我们要滚动的dom，这里是打了一个时间差，在第二个dom滚动结束的时候，tableTop=0，这个时候就会重新开始滚动，而视觉上就会产生一个无缝衔接的效果，样式代码我就不贴了

  

        

          

            
            
{{item.carport}}
            {{item.status == 1 ? '在库' :'未在库'}}
          
        
        
        

          

            
            
{{item.carport}}
            {{item.status == 1 ? '在库' :'未在库'}}
          
        
      

• 下面是组件中需要设置的几个数据,listData我是从父组件传递过来的数据

data() {
    return {
      tableTimer: null,
      isAutoRoll: false, // 是否开启滚动
      tableTop: 0, // 滚动的像素
      listSize: 8, //容器内可视最大完整行数
      ListTimerInterval: 50, //向上滚动 1px 所需要的时间，越小越快
    };
  },
  computed: {
    // 根据不同分辨率动态获取滚动元素item的高度（包含margin-top/bottom,border等）
    lineHeight() {
      const height = document.getElementsByClassName("carport-state-item")[0]
        .clientHeight;
      return height;
    },
  },

• 最后是实现无缝滚动的方法

// 无缝滚动效果的实现
    tableTimerFun() {
      let count = 0;
      this.tableTimer = setInterval(() => {
        if (count < this.listData.length * this.lineHeight) {
          this.tableTop -= 1;
          count++;
        } else {
          count = 0;
          this.tableTop = 0;
        }
      }, this.ListTimerInterval);
    },

• 最后别忘了在卸载组件前销毁掉定时器，以及初始滚动状态的数据

 beforeDestroy() {
    this.tableTop = 0;
    this.isAutoRoll = false;
    clearInterval(this.tableTimer);
  },

• 最后贴上整体代码

• 最后我们看一下效果