• 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; } },
    转载标明来路-博客园, 联系方式1763907618@qq.com
  • 相关阅读:
    常见银行编码收集
    kafka集群在消息消费出现无法找到topic分区的处理解决
    find命令通过排序只保留最新的文件目录
    Git fetch和git pull的区别
    git 常用命令
    wordpress模板修改及函数说明
    webbench进行压力测试
    git存储用户名与密码
    导出putty配置
    一个成功的Git分支模型
  • 原文地址:https://www.cnblogs.com/wangyongping/p/15766882.html
Copyright © 2020-2023  润新知