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;
        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 chiLength = dom.children.length;
      let chiH = chiDom.offsetHeight;
      let allH = dom.offsetHeight;
      let chiAllH = chiH * chiLength;
      if (this.timeScorl) {
        clearInterval(this.timeScorl);
      }
      let resultH = 0;
      let chazhi = chiAllH - allH;
      this.timeScorl = setInterval(scorlRun, timePop);
      // 滚动方式
      function scorlRun() {
        if (chazhi > resultH) {
          resultH = resultH + offPop;
          if (resultH > chiH) {
            if (_this.timeScorl) {
              clearInterval(_this.timeScorl);
            }
// 获取隐藏消失的dom let fistnode
= dom.firstElementChild;
// 删除dom dom.removeChild(fistnode);
// 放到队尾 dom.appendChild(fistnode); resultH
= 0; if (this.timeScorl1) { clearTimeout(this.timeScorl1); } _this.timeScorl1 = setTimeout(function() { _this.timeScorl = setInterval(scorlRun, timePop); }, 1000); } else { setScrollTop(dom, resultH); } } else { if (this.timeScorl1) { clearTimeout(this.timeScorl1); } if (_this.timeScorl) { clearInterval(_this.timeScorl); } } } //设置窗口滚动条高度 function setScrollTop(domIn, top) { if (!isNaN(top)) domIn.scrollTop = top; } },