列表无缝滚动--vue + animated

html部分

<template>
  <div class="table_scroll_wrapper" :style="{width:component.width + 'px',height:component.height + 'px'}">
    <div class="table_scroll" :id="this.$attrs.index">
 <!--表头字段------>
      <div class="table_header" :style="{height: option.singleHeight + 'px', background: option.headerBackgroud}"><span v-for="(h, i) in JSON.parse(option.column)" :key="i">{{h}}</span></div>
 <!--内容------->
      <div class="body_wrap" ref="bodyWrap" :style="{height: component.height-option.singleHeight + 'px'}">
        <ul ref="ulWrap" class="ul_wrap" @mouseenter="mEnter" @mouseleave="mLeave">
          <li v-for="(item, index) in list" :key="index" :style="{height: option.singleHeight + 'px', background: index % 2 ? option.othBackground : ''}">
            <span v-for="(val, ind) in item.column" :key="ind" :style="{color: ind == option.nthColumn-1 ? option.ntdColor : ''}" @click="option.nthColumn == ind + 1 && handleClick(item)">{{val}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

js部分

<script>
import $ from "jquery";
export default {
  name: "TableScroll",
  props: {
    option: Object,
    component: Object,
  },
  data() {
    return {
      screenId: 0,
      column: ['社区', '事件数(件)', '操作'],
      list: [
        {
          column: ['A社区', 'A社区', 'A社区'],
          pieData: [
            {name: "处理中", value: 100},
            {name: "已办结", value: 134}
          ],
          subtext: 234,
          text: '事件总数',
          endRate: '99%',
        },
        {
          column: ['B社区', 'B社区', 'B社区'],
          pieData: [
            {name: "处理中", value: 50},
            {name: "已办结", value: 30}
          ],
          subtext: 80,
          text: '事件总数',
          endRate: '99%',
        },
        {
          column: ['C社区', 'C社区', 'C社区'],
          pieData: [
            {name: "处理中", value: 400},
            {name: "已办结", value: 20}
          ],
          subtext: 420,
          text: '事件总数',
          endRate: '99%',
        },
        {
          column: ['D社区', 'D社区', 'D社区'],
          pieData: [
            {name: "处理中", value: 10},
            {name: "已办结", value: 34}
          ],
          subtext: 44,
          text: '事件总数',
          endRate: '99%',
        },
        {
          column: ['E社区', 'E社区', 'E社区'],
          pieData: [
            {name: "处理中", value: 100},
            {name: "已办结", value: 100}
          ],
          subtext: 200,
          text: '事件总数',
          endRate: '99%',
        },
        {
          column: ['F社区', 'F社区', 'F社区'],
          pieData: [
            {name: "处理中", value: 100},
            {name: "已办结", value: 14}
          ],
          subtext: 114,
          text: '事件总数',
          endRate: '99%',
        }
      ],
      timer: null,  
      marginTop: 0,
      activeIndex: 0,
      tableWindowProps: {
        pieData: [],
        text: '',
        subtext: 0,
        endRate: ''
      }  
    };
  },
  created(){
    this.marginTop = 0
  },
  mounted() {
    this.requestData();
  },
  methods: {
    requestData() {
      var url = this.$attrs.url;
      var tag = this.$attrs.data.tag;
      this.screenId = this.$attrs.data.screenId;
      this.$request
        .post(url, {
          screenId: this.screenId,
          tag,
        })
        .then((res) => {
          if (res.data.success) {
            const { list } = res.data.data;
            this.list = list;
            this.$nextTick(()=> {
              this.scrollTable()
            })
          }
        });
    },
    scrollTable(){
      const _this = this
      let visibleHeight = parseInt(this.$refs.bodyWrap.style.height.split('px')[0])
      let contentHeight = this.$refs.ulWrap.offsetHeight
      if(visibleHeight == contentHeight) return
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(_this.listScroll, 2000)
    },
    listScroll() {
      var that = this;
      //如果是不同高度的列表。可以在计时器开始之前获取列表每项的高度存成数组，增加height[activeIndex]
      const { singleHeight} = this.option
      $("ul.ul_wrap",$(`#${that.$attrs.index}`))
        .stop()
        .animate(
          {
            marginTop: -singleHeight,
          },
          500,
          "linear",
          function () {
            $("ul.ul_wrap",$(`#${that.$attrs.index}`)).find("li").slice(0, 1).appendTo($("ul.ul_wrap",$(`#${that.$attrs.index}`)));
            $("ul.ul_wrap",$(`#${that.$attrs.index}`)).css("margin-top", 0);
            that.activeIndex += 1;
            if (that.activeIndex > that.list.length - 1) {
              that.activeIndex = 0;
            }
          }
        );
    },
    mEnter() {
      clearInterval(this.timer);
    },
    mLeave() {
      this.scrollTable()
    },
    handleClick(item){
      const windowState = this.$attrs.windowState;
      if (windowState !== "1") return;
      this.tableWindowProps.pieData = item.pieData
      this.tableWindowProps.subtext = item.subtext
      this.tableWindowProps.text = item.text
      this.tableWindowProps.endRate = item.endRate
      window.setTableScrollWindowData({
        ...this.tableWindowProps,
      });
      
    }
  },
};
</script>

样式部分

<style lang="scss" scoped>
.table_scroll_wrapper {
  color: #fff;
  .table_scroll{
    .table_header{
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .body_wrap{
      overflow: hidden;
      & > ul{
        list-style: none;
        li{
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
  }
}
</style>