vue-seamless-scroll滚动列表动态追加数据

1.安装vue-seamless-scroll

npm install vue-seamless-scroll --save

2.例子（参考官网：https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/11-array-length-update.html）

        <vue-seamless-scroll
          :data="datalist"
          :class-option="defaultOption"
          class="warp"
          ref="seamlessScroll"
        >
          <ul class="item">
            <li v-for="(item, index) in datalist" :key="index">
              <span>{
   
   { item.id }}</span>
              <span>{
   
   { item.name }}</span>
            </li>
          </ul>
        </vue-seamless-scroll>

Vue.use(VueResource);
export default {
    
    
  name: "HelloWorld",
  data() {
    
    
    return {
    
    
      datalist: [],
      mark：0,
    };
  },
    // 监听属性 类似于data概念，defaultOption和上面的:class-option对应
  computed: {
    
    
    defaultOption() {
    
    
      return {
    
    
        step: 0.5, // 数值越大速度滚动越快 
 //自己是定时器轮询后端接口，由于返回的数据是1s一更新，要小于后端更新频率，不然最下面的数据还没更新
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.datalist.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },

  methods: {
    
    
   getAllList() {
    
    
      this.$http
        .get(URL)
        .then((result) => {
    
    
            if (this.mark == 12) {
    
     //自己之所以设置成12，是因为上面设置开始滚动limitMoveNum是7，
            //两轮数据缓冲时间，这样可以确保获取到的数据充分更新
              this.mark = 0;
            }
            this.datalist[this.mark] = result.data.data;
            this.datalist.push();
            this.mark = this.mark + 1;
            // listData length无变化，仅仅是属性变更，手动调用下组件内部的reset方法
            this.$refs.seamlessScroll.reset();
        });
      }

.warp {
    
    
  overflow: hidden;/* 多出的隐藏*/
  height: 210px; /* 视觉滚动的高度*/
}