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; /* 視覺滾動的高度*/
}