【Vue.js】加載更多—vue-infinite-scroll

 

引言

今天用到了一個加載更多的插件，用起來很方便，插件的名字叫作vue-infinite-scroll

咱們能夠去npmjs.com官網看一下這個vue-infinite-scroll的用法，官網上面寫的已經很簡單易懂的了。

 

安裝

npm install vue-infinite-scroll --save 

 

引入

官網介紹了三種引入該插件的方式，分別是Common js方式(require("XXXX")) 、 ES6語法方式(import xxx from xxx)、 還有直接<script src="../node_modules/vue-infinite-scroll/vue-infinite-scroll.js"></script>

個人是vue項目，使用的是ES6語法，固然是用ES6語法方式導入啦。

上面安裝成功以後，在main.js文件下引入該插件，輸入下面的代碼

import VueLazyLoad from 'vue-lazyload' Vue.use(infiniteScroll) 

 

使用

官網上面已經給出了例子，以下：

 

1）首先下面這段官網給出的div的DOM元素放在你<template><div></div></template>的任意地方，都沒問題噠！

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> ... </div> 

 

2）由於要經過busy變量來控制infinite-scroll-disabled（無線滾動禁止）屬性，你可能會問，啥子叫無線滾動禁止屬性丫？？？

那麼你就要先知道dom裏面的infinite-scroll-distance="10"是用來幹嗎的？

infinite-scroll-distance這個屬性，叫無線滾動間距，顧名思義，就是規定滑動條與列表外層div的底部的距離，假如infinite-scroll-distance=「10」，就是說，滾動條距離外層div底部的距離若是低於或者等於10，就會無限次數出發loadMore事件！！！！！

那怎麼控制它不要無線觸發loadMore事件呢，就是靠infinite-scroll-disabled（無線滾動禁止）屬性來控制，false就是不由止，true就是禁止的意思。

 

例子

看下面例子：

<script> export default { data () { return { page: 1, pageSize: 8, // 加載更多屬性 busy: true// 無線滾動禁用 } }, mounted () { this.getGoodsList() }, methods: { // 獲取商品列表 getGoodsList (flag) { let param = { page: this.page, pageSize: this.pageSize, sort: this.sortFlag ? 1 : -1 } this.http.get('/goods', {params: param}).then((response) => { let res = response.data if (res.status === '0') { // flag === true，證實是第二次或第二次以上加載數據了 if (flag) { this.goodsList = this.goodsList.concat(res.result.list) // 數據追加 this.busy = false // 無線滾動禁止 取消，意思就是開啓無限滾動監聽 if (res.result.list.length === 0) { this.busy = true // 無線滾動禁止 啓動 } else { this.busy = false // 無線滾動禁止 取消 } } else { // 第一次加載數據 this.goodsList = res.result.list this.busy = false // 無線滾動禁止 取消 } } else { // 接口調用異常 this.goodsList = [] } }) }, // 加載更多 loadMore () { this.busy = true // 無線滾動禁止 setTimeout(() => { this.page++ this.getGoodsList(true) // 調用獲取商品的接口 }, 500) } } } </script> 

 

注意

值得注意的是，爲何要在loadMore裏面，再調用接口的時候，加了個延遲函數，並設延遲500ms呢？

我也不明白~~

這500ms的時間差，做用是，當你可以無線滾動禁止設爲 false的時候，當滾動條間距與底部相差10的時候，它會就無限制的調用loadMore函數，而且已500ms的時間差進行無線循環請求。

 

其實不要這個setTimeout函數也是能夠的，只要咱們合理的控制busy的true與false，就可以很好地控制請求的次數，實現加載更多的功能，像上面的例子同樣！

 

以前也有講過另外兩種加載更多的實現，有興趣的小夥伴能夠跳轉查閱。

 

 

---end---