web-dev-qa-db-ja.com

my vue jsで無限スクロールを実装する方法

現在、laravelとvueを組み合わせています。このページはサーバーから投稿データを取得し、ユーザーのタイムラインに表示する必要があります。すべてのデータを取得して表示します。それに私はそれを行う方法がわからなかった。私はまた動作しない多くの異なる方法を試されました。多分vueについての私の知識はまだ新鮮です。

ここに私の元のコードがあります： jsfiddle

これは、この example で無限スクロールを実装しようとするコードです。

jsfiddle 2

スクロールシンボルは表示されていますが、配列が通過しなかったように見え、データは一度にすべて表示されます。

送信したら/feedサーバーは、投稿情報を含む配列を返します。しかし、リスト配列に渡す方法がわかりません。

返される配列

In vue enter image description here

ルート中 enter image description here

javascriptphplaravelvue.js
11
masterhunter

インストール：

npm install vue-infinite-scroll --save

Main.jsへの登録：

// register globally
var infiniteScroll =  require('vue-infinite-scroll');
Vue.use(infiniteScroll)

// or for a single instance
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
  directives: {infiniteScroll}
})

あなたのhtml：

<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);
    }
  }
});
17
Gabriel Robert

1つの解決策は、バックエンドへの迅速なリクエストを停止するためのロックメカニズムをセットアップすることです。リクエストが行われる前にロックが有効になり、リクエストが完了してDOMが新しいコンテンツ（ページのサイズを拡張する）で更新されると、ロックが無効になります。

例えば：

new Vue({
// ... your Vue options.

ready: function () {
var vm = this;
var lock = true;
window.addEventListener('scroll', function () {
  if (endOfPage() && lock) {
    vm.$http.get('/myBackendUrl').then(function(response) {
      vm.myItems.Push(response.data);
      lock = false;
    });
  };
});

}; }）;

覚えておくべきもう1つのことは、スクロールイベントが実際に（特にモバイルデバイスで）必要以上にトリガーされることであり、パフォーマンスを向上させるためにこのイベントを調整できます。これはrequestAnimationFrameで効率的に実行できます。

;(function() {
 var throttle = function(type, name, obj) {
    obj = obj || window;
    var running = false;
    var func = function() {
        if (running) { return; }
        running = true;
        requestAnimationFrame(function() {
            obj.dispatchEvent(new CustomEvent(name));
            running = false;
        });
    };
    obj.addEventListener(type, func);
};

/* init - you can init any event */
throttle ("scroll", "optimizedScroll");
})();

// handle event
window.addEventListener("optimizedScroll", function() {
console.log("Resource conscious scroll callback!");
});
2
ashish bansal

@ashishbansalの回答に基づく

for vue js 2 ... note ecma script 6を主に使用しました...古い表記を使用したい場合は変換する必要があります

準備ができました

mounted() {
      let app = this;
      let distanceStartLoading = 300; //start loading stuff before reaching the very bottom right...

      var endOfPage = function endOfPage() {
            let bottomOfWindow = document.getElementsByTagName('body')[0].scrollTop + window.innerHeight >= document.documentElement.offsetHeight - distanceStartLoading;
            if (bottomOfWindow) {
              return true;
            } else {
              return false;
            }
          }
      ;(function () {
        var throttle = function (type, name, obj) {
          obj = obj || window;
          var running = false;
          var func = function () {
            if (running) {
              return;
            }
            running = true;
            requestAnimationFrame(function () {
              obj.dispatchEvent(new CustomEvent(name));
              running = false;
            });
          };
          obj.addEventListener(type, func);
        };

        /* init - you can init any event */
        throttle("scroll", "optimizedScroll");
      })();

      // handle event
      window.addEventListener("optimizedScroll", function () {
        console.log("scrolling but not endofpage");
        if (endOfPage()) {
          console.log("hellow");
        }
        ;
      });

    },
0
Toskan

Vue.jsを使用している場合、シンプルかつ迅速な解決策は vue-infinite-scroll を使用することです。

0
unnikked