VUE 列表滚动

方法1：

    //无缝滚动
                const boxH = this.$refs.bottombtn.offsetHeight; // 父元素的高
                      const boxulH = this.$refs.boxul.offsetHeight; // 被滚动的高
                      const cha = boxulH - boxH;
                      let num = 0;
                      clearInterval(this.timers2);
                      this.timers2 = setInterval(() => {
                        if (num <= -cha) {
                          num = 0;
                        }
                        num -= 1;
                        this.$refs.boxul.style.marginTop = num + "px";
                      }, 20);

方法2：

//列表高度滚动
  fan() {
          const boxH = this.$refs.box.offsetHeight; // 父元素的高
          const boxulH = this.$refs.boxul.offsetHeight; // 被滚动的高
          const boxliH = this.$refs.boxli.offsetHeight + 9; // 每次滚动的高度 //9是      magrin值
          const cha = boxulH - boxH - 9; // 9是magrin值
          console.log(boxH, boxulH, boxliH, cha)
          let num = 0;
          clearInterval(this.timers2);
          this.timers2 = setInterval(() => {
            if (num <= -cha) { // 判断如果滚动到顶部
              num = 0;
              this.$refs.boxul.style.transition = '0s all'; // 重置被滚动元素的高度
              this.$refs.boxul.style.marginTop = num + 'px';
              setTimeout(() => { // 重置高度后向上滚动一格否则中间间隔时间较长
                this.$refs.boxul.style.transition = '1s all';
                num -= boxliH;
                this.$refs.boxul.style.marginTop = num + 'px';
              }, 200)
            } else { // 正常滚动
              this.$refs.boxul.style.transition = '1s all';
              num -= boxliH;
              this.$refs.boxul.style.marginTop = num + 'px';
            }
          }, 2000);
        }
                //作者：gaochengxin
                //采纳请点赞谢谢