當頁面為底部區域時，使用 vue js 加載更多數據

Question

當我的頁面滾動the bottom時，我試圖讓我的Load More數據。 首先，我制作了一個 div 元素，並將其放在數據循環的末尾。

<div class="products">
    <p>{{ status }}</p>
    <div class="product" v-for="(item, index) in items">
        <div>
            <div class="product-image"><img :src="item.link" alt=""></div>
        </div>
        <div>
            <h4 class="product-title">{{ item.title }}</h4>
            <p>Price : {{ price }}</p>
            <button class="add-to-cart btn" @click="addItem(index)">Add Item To Cart</button>
        </div>
    </div>
    <div id="product-list-bottom"></div>
</div>

id product-list-bottom Div 元素我將使用scrollMonitor.js檢測它

我的默認數據：

data: {
    status: 'Empty product',
    total: 0,
    items: [],
    cart: [],
    newSearch: 'anime',
    lastSearch: '',
    price: STATIC_PRICE,
    result: []
}

內部mounted我檢測到滾動到底部：

mounted: function() {
    this.onSubmit()

    var vueInstance = this
    var elem = document.getElementById('product-list-bottom')
    var watcher = scrollMonitor.create(elem)
    watcher.enterViewport(function() {
        vueInstance.appendItems()
    })
}

在里面mounted我調用onSubmit ：

onSubmit: function() {
    this.items = ''
    this.status = "Searching keyword '" + this.newSearch + "' on server ..." 

    this.$http.get('/search/'.concat(this.newSearch))
    .then(function(response) {
        this.lastSearch = this.newSearch,
        this.status = 'Find ' + response.data.length + ' data'
        this.result = response.data
        this.appendItems()
    })
}

在onSubmit我調用appendItems函數：

appendItems: function() {
    if(this.items.length < this.result.length) {

        var start = this.items.length
        var end = parseInt(this.items.length + 5)

        var append = this.result.slice(start, end)

        this.items = this.items.concat(append)

        console.log(append)
    }
}

一切順利，但是當我向下滾動時，我收到一條錯誤消息：

這是因為這一行：

this.items = this.items.concat(append)

如何根據行上的命令使 xxx 上的數據發生變化（總是從數組中添加五個新數據）：

var end = parseInt(this.items.length + 5)

謝謝

Answer 1

似乎'/search/'.concat(this.newSearch)被評估為函數而不是實際的string value

如果你使用 babel/webpack，試試這個

this.$http.get(`/search/`${this.newSearch}`)

或者如果沒有

this.$http.get('/search/' + this.newSearch)

Answer 2

我認為從 Vue 2.3+ 開始，你可以在沒有任何 jQuery 東西或任何其他依賴項的情況下完成這項工作：

<style>
.scrollbar{
    overflow-y: scroll;
    //...
}
.styled-scrollbar::-webkit-scrollbar
.styled-scrollbar::-webkit-scrollbar-thumb
.styled-scrollbar::-webkit-scrollbar-track{
    //styling
}
</style>
<template>
//...
<div @scroll="scroll" class="scrollbar">
    <div v-for="item in items" :key="item.id">
        //TODO: item content
    </div
</div>
//...
</template>
<script>
{
    data: {
        //..
        lastScrollUpdate:0
    }
    //..
    mounted: {
        scroll:function (e) {
            var scrollBar=e.target;
            if((scrollBar.scrollTop + scrollBar.clientHeight >= scrollBar.scrollHeight-20)){
                var t=new Date().getTime();
                if((t-this.lastScrollUpdate)>3000){
                    this.lastScrollUpdate=t;
                    console.log('reached end: '+scrollBar.scrollTop+' '+scrollBar.clientHeight+' '+scrollBar.scrollHeight);
                    //TODO: load more data
                }else{
                    console.log("< 3sec between scoll. no update");
                }
            }
        },
        //..
    }
}
</script>

您可能還想將其調整為“@scroll.passive”，以便讓滾動功能​​與 UI 並行執行（ https://v2.vuejs.org/v2/guide/events.html#Event-修飾符）