Mint UI 無(wú)限滾動(dòng)指令-Infinite Scroll

無(wú)限滾動(dòng)指令。

引入

import { InfiniteScroll } from 'mint-ui';

Vue.use(InfiniteScroll);

例子

為 HTML 元素添加 ?v-infinite-scroll? 指令即可使用無(wú)限滾動(dòng)。滾動(dòng)該元素，當(dāng)其底部與被滾動(dòng)元素底部的距離小于給定的閾值（通過(guò) ?infinite-scroll-distance? 設(shè)置）時(shí)，綁定到 ?v-infinite-scroll? 指令的方法就會(huì)被觸發(fā)。

<ul
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
  <li v-for="item in list">{{ item }}</li>
</ul>

loadMore() {
  this.loading = true;
  setTimeout(() => {
    let last = this.list[this.list.length - 1];
    for (let i = 1; i <= 10; i++) {
      this.list.push(last + i);
    }
    this.loading = false;
  }, 2500);
}

API