最近给朋友帮忙的时候遇到一个列表向上滚动无缝连接功能的需求，整理了下思路，把这个功能草草的做出来了，尚未做优化完善，先记录一下吧~

Html代码

<template>
  <div class="home">
    <div class="light">
      <ul id="list" ref="edic" :style="{transform:'translateY('+x+'px)'}">
        <li class="item" v-for="(item,index) in winnerList" :key="index">{{item.accountName}}</li>
      </ul>
      <ul id="list2" :style="{transform:'translateY('+y+'px)'}">
        <li class="item" v-for="(item,index) in winnerList" :key="index">{{item.accountName}}</li>
      </ul>
    </div>
  </div>
</template>

Data数据

 x: 0,             //list1容器的translateY值
 y: 0,             //list2容器的translateY值
 winnerList: [     //滚动数据
        {
          accountName: "1",
          id: "0",
          profit: "58354",
        }
    .......
]

js逻辑

mounted: function () {
    this.scroll();        //执行滚动函数
  },
  watch: {},
  methods: {
    scroll() {
      let ofHeight = this.$refs.edic.offsetHeight;      //获取容器offsetHeight
      let interVal = setInterval(() => {                //设定定时器
        this.x -= 2;                                    //每次执行-2
        console.log(this.x);                            //容器1上滚
        if (this.x <= -ofHeight) {                      //当上滚像素大于等于容器offsetHeight
          clearInterval(interVal);                      //停止定时器
          interVal = setInterval(() => {                //重新定义定时器
            this.x -= 2;                                //容器1继续上滚
            console.log(this.x);
            this.y -= 2;                                //容器2衔接上滚
            if (this.x <= -(2 * ofHeight)) {            //当容器1上滚像素为2倍的offsetHeight时  
              this.x = 0;                               //translateY的值设定回0
            }
            if (this.y <= -(2 * ofHeight)) {            //当容器2上滚像素为2倍的offsetHeight时  
              this.y = 0;                               //translateY的值设定回0
            }
          }, 50);                                       //50毫秒执行一次
        }
      }, 50);                                           //50毫秒执行一次
    },
  },
};

CSS样式

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
  box-sizing: border-box;
}
.light {
  position: fixed;
  right: 200px;
  top: 200px;
  width: 200px;
  height: 600px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  overflow: hidden;
  ul {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    li {
      height: 40px;
      width: 100%;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>