vue 列表上下无缝滚动轮播

vue 列表上下无缝滚动轮播

 

滚动从头到尾从上到下，最后首位相接，无限滚动

 // 判断是否滚动
    setTopGoBom() {
      let dom = this.$refs[this.bodyTableId];
      if (dom) {
        let allH = dom.offsetHeight;
        let chiDom = dom.firstElementChild;
        let chiLength = dom.children.length;
        let chiH = 0;
        let chiAllH = 0;
        // 存在子dom
        if (chiDom) {
          chiH = chiDom.offsetHeight;
          chiAllH = chiH * chiLength;
          // 比较行高
          if (chiAllH > allH) {
            this.stateScorl(dom, chiDom);
          }
        }
      }
    },
    // 开始滚动
    stateScorl(dom, chiDom) {
      let _this = this;
      let timePop = 1;
      let offPop = this.resultNumRun;
      let chiH = chiDom.offsetHeight;
      // 清除前定时
      if (this.timeScorl) {
        clearInterval(this.timeScorl);
      }
      if (this.timeScorl1) {
        clearTimeout(this.timeScorl1);
      }
      // 重置起始滚动条高度
      let resultH = 0;
      this.timeScorl = setInterval(scorlRun, timePop);
      // 滚动方式
      function scorlRun() {
        resultH = resultH + offPop;
        if (resultH > chiH) {
          if (_this.timeScorl) {
            clearInterval(_this.timeScorl);
          }
          if (this.timeScorl1) {
            clearTimeout(this.timeScorl1);
          }
          // 获取第一个节点并删除 添加到队尾
          let fistnode = dom.firstElementChild;
          dom.removeChild(fistnode);
          dom.appendChild(fistnode);
          // 重置起始滚动条高度
          resultH = 0;
          // 1秒后重新滚动
          _this.timeScorl1 = setTimeout(function() {
            _this.timeScorl = setInterval(scorlRun, timePop);
          }, 1000);
        } else {
          setScrollTop(dom, resultH);
        }
      }
      //设置窗口滚动条高度
      function setScrollTop(domIn, top) {
        if (!isNaN(top)) domIn.scrollTop = top;
      }
    },