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;
}
},