【vuejs插件】使用vue-infinite-scroll在vue中實現下拉加載數據，瀑布流，詳細操做

在vue中實現下拉加載數據，瀑布流

說明

節約流量
提升用戶體驗

不至於每次把全部數據加載出來，出現用戶等待時間較長

實現方式

需求：

當用戶打開首頁的時候顯示8條數據，當用戶滾動到屏幕可視區邊緣的時候，而後觸發一個函數，請求一個api加載新的數據，而且填充到以前的數據下面。

實現：

vue-infinite-scroll

vue插件:vue-infinite-scroll
github地址

安裝

npm i vue-infinite-scroll -D

在main.js入口文件裏面引入

使用CommonJS方式

// 註冊全局
var infiniteScroll =  require('vue-infinite-scroll');
Vue.use(infiniteScroll)
 
//單獨的組件裏面使用
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
  directives: {infiniteScroll}
})

使用 ES2015的方式

// 註冊全局
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
 
//單獨的組件裏面使用
import infiniteScroll from 'vue-infinite-scroll'
new Vue({
  directives: {infiniteScroll}
})

使用方式

Use v-infinite-scroll to enable the infinite scroll, and use infinite-scroll-* attributes to define its options.
使用v-infinite-scroll啓用無限滾動，並使用無限滾動- *屬性來定義它的選項。

The method appointed as the value of v-infinite-scroll will be executed when the bottom of the element reaches the bottom of the viewport.

當元素底部到達viewport底部時，將觸發v-infinite-scroll值的方法。

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

var count = 0;

new Vue({
  el: '#app',
  data: {
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
});

選項

選項	描述
infinite-scroll-disabled	若是該屬性的值爲true，則將禁用無限滾動。
infinite-scroll-distance	數字(默認值= 0)——在執行v -infinite- scroll方法以前，元素底部和viewport底部之間的最小距離。
infinite-scroll-immediate-check	布爾值(默認值= true)表示該指令應該在綁定後當即檢查。若是可能，內容不夠高，不足以填滿可滾動的容器。
infinite-scroll-listen-for-event	當事件在Vue實例中發出時，無限滾動將再次檢查。
infinite-scroll-throttle-delay	下次檢查和此次檢查之間的間隔(默認值= 200)

後端實現：

需求分析：

接收參數：

每頁有多少條 prePage
第幾頁(當前頁) page
當咱們第一次加載數據的時候加載8條
區分第一次和不是第一次加載

代碼實現

在dom裏面

<div class="accessory-list-wrap">
                    <div class="accessory-list col-4">
                        <ul>
                            <li v-for="(item,index) in goods" :key="index">
                                <div class="pic">
                                    <a href="#"><img v-lazy="'/static/img/' + item.productImage" alt=""></a>
                                </div>
                                <div class="main">
                                    <div class="name">{{item.productName}}</div>
                                    <div class="price">{{item.salePrice}}</div>
                                    <div class="btn-area">
                                        <a href="javascript:;" class="btn btn--m">加入購物車</a>
                                    </div>
                                </div>
                            </li>
                            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                            ...
                            </div>
                        </ul>
                    </div>
                </div>

vue 組件裏面：

data(){
    return{
            busy: true,
        page:1,
        pageSize:8,
    }
},methods:{


 getGoodsList(flag){
                let sort = this.sortFlag ? 1 : -1;
                let param = {
                    sort:sort,
                    priceLevel:this.priceChecked,
                    page:this.page,
                    pageSize:this.pageSize
                }
                axios.get('/goods/list',{params:param}).then(res=>{
                    if(flag){
                        // 屢次加載數據
                        this.goods = this.goods.concat(res.data.result);
                        if(res.data.result.length == 0){
                            this.busy = true;
                        }else{
                            this.busy = false;
                        }
                    }else{
                        // 第一次加載數據
                        this.goods = res.data.result;
                        // 當第一次加載數據完以後，把這個滾動到底部的函數觸發打開
                        this.busy = false;
                    }
                })
            },
            loadMore: function() {
                this.busy = true;
                // 屢次加載數據
                setTimeout(() => {
                    this.page ++;
                    this.getGoodsList(true);
                }, 1000);
            }
}

let currentPage = parseInt(req.param('page')) > 0 ? parseInt(req.param('page')) : 1;
    let pageSize = parseInt(req.param('pageSize')) > 0 ? parseInt(req.param('pageSize')) : 8;
  // 要跳過多少條
    let skip = (currentPage - 1) * pageSize;

     let goodsModel = Goods.find(param);
    goodsModel.sort({ 'salePrice': sort }).skip(skip).limit(pageSize);

    goodsModel.exec({}, function(err, doc) {
        if (err) {
            res.json({ status: "1", msg: err.message })
        } else {
            res.json({ status: '0', msg: '', result: doc })
        }
    })

後續會優化