無(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);
}
參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
infinite-scroll-disabled | 若為真,則無(wú)限滾動(dòng)不會(huì)被觸發(fā) | Boolean | false | |
infinite-scroll-distance | 觸發(fā)加載方法的滾動(dòng)距離閾值(像素) | Number | 0 | |
infinite-scroll-immediate-check | 若為真,則指令被綁定到元素上后會(huì)立即檢查是否需要執(zhí)行加載方法。在初始狀態(tài)下內(nèi)容有可能撐不滿容器時(shí)十分有用。 | Boolean | true | |
infinite-scroll-listen-for-event | 一個(gè) event,被執(zhí)行時(shí)會(huì)立即檢查是否需要執(zhí)行加載方法。 | Function |
更多建議: