新しいFirebase（2016）で無限スクロールを実装する方法は？

Question

QUESTION：ジャバスクリプト（およびNode.jsの）を使用してFirebaseでの効率的な無限スクロールを実装する方法

？

---

私がチェックWHAT：

Implementing Infinite Scrolling with Firebase?

問題：古いfirebase^

Infinite scroll with AngularJs and Firebase

---

コードからを： Infinite scroll with AngularJs and Firebase

"まず、Firebaseにインデックスを作成することをお勧めします。この回答のために、私はこの1つを作成します。

{ 
    "rules": { 
     ".read": true, 
     ".write": false, 
     "messages": { 
     ".indexOn": "id" 
     } 
    } 
} 

それでは、Firebaseでいくつかの魔法を作ってみよう：（jQueryのなし）

// @fb: your Firebase. 
// @data: messages, users, products... the dataset you want to do something with. 
// @_start: min ID where you want to start fetching your data. 
// @_end: max ID where you want to start fetching your data. 
// @_n: Step size. In other words, how much data you want to fetch from Firebase. 
var fb = new Firebase('https://<YOUR-FIREBASE-APP>.firebaseio.com/'); 
var data = []; 
var _start = 0; 
var _end = 9; 
var _n = 10; 
var getDataset = function() { 
    fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) { 
     data.push(dataSnapshot.val()); 
    }); 
    _start = _start + _n; 
    _end = _end + _n; 
} 

最後に、より良い無限スクロール：

window.addEventListener('scroll', function() { 
    if (window.scrollY === document.body.scrollHeight - window.innerHeight) { 
    getDataset(); 
    } 
}); 

私はReactでこのアプローチを使用しています。データがどれほど大きくても速く燃えています。 "

その溶液にJobsamuelによってCT 15時02分で26 '15）

（）

---

PROBLEM

、Nポストはスクロール高さの端部に到達するたびにロードされます画面の

画面サイズによっては、必要以上に多くの投稿がロードされることがあります（画面の高さには2つの投稿のみが含まれているため、必要以上に3つの投稿がロードされます。例えばn = 5のときの画面の高さ）。

つまり、3*NumberOfTimesScrollHeightHasBeenPassedは、スクロール高さの最後に到達するたびに必要以上の投稿が読み込まれることを意味します。

---

MY CURRENT CODE（一度にロードするすべての記事、ノー無限スクロール）：

var express = require("express"); 
var router = express.Router(); 

var firebase = require("firebase"); 

router.get('/index', function(req, res, next) { 

    var pageRef = firebase.database().ref("posts/page"); 

    pageRef.once('value', function(snapshot){ 
     var page = []; 
     global.page_name = "page"; 
     snapshot.forEach(function(childSnapshot){ 
      var key = childSnapshot.key; 
      var childData = childSnapshot.val(); 
      page.push({ 
       id: key, 
       title: childData.title, 
       image: childData.image 
      }); 
     }); 
     res.render('page/index',{page: page}); 
    }); 
}); 

Answer 1

ここで無限のページングのための完全なコードです。

関数createPromiseCallbackは、約束とコールバックの両方をサポートするためのものです。

function createPromiseCallback() { 
    var cb; 
    var promise = new Promise(function (resolve, reject) { 
     cb = function (err, data) { 
      if (err) return reject(err); 
      return resolve(data); 
     }; 
    }); 
    cb.promise = promise; 
    return cb; 
} 

機能getPaginatedFeedは、実際のページング

function getPaginatedFeed(endpoint, pageSize, earliestEntryId, cb) { 
    cb = cb || createPromiseCallback(); 

var ref = database.ref(endpoint); 
    if (earliestEntryId) { 
    ref = ref.orderByKey().endAt(earliestEntryId); 
    } 
    ref.limitToLast(pageSize + 1).once('value').then(data => { 
    var entries = data.val() || {}; 

    var nextPage = null; 
    const entryIds = Object.keys(entries); 
    if (entryIds.length > pageSize) { 
     delete entries[entryIds[0]]; 
     const nextPageStartingId = entryIds.shift(); 
     nextPage = function (cb) { 
      return getPaginatedFeed(endpoint, pageSize, nextPageStartingId,      cb); 
     }; 
    } 
    var res = { entries: entries, nextPage: nextPage }; 
    cb(null, res); 
    }); 
    return cb.promise; 
} 

そして、ここでは、画面上に置くためにどのように多くの項目の質問については何のことができます。getPaginatedFeed機能

var endpoint = '/posts'; 
var pageSize = 2; 
var nextPage = null; 
var dataChunk = null; 
getPaginatedFeed(endpoint, pageSize).then(function (data) { 
    dataChunk = data.entries; 
    nextPage = data.nextPage; 

    //if nexPage is null means there are no more pages left 
    if (!nextPage) return; 

    //Getting second page 
    nextPage().then(function (secondpageData) { 
     dataChunk = data.entries; 
     nextPage = data.nextPage; 
     //Getting third page 
     if (!nextPage) return; 

     nextPage().then(function (secondpageData) { 
      dataChunk = data.entries; 
      nextPage = data.nextPage; 
      //You can call as long as your nextPage is not null, which means as long as you have data left 
     }); 
    }); 

}); 

を使用する方法である実装しますこのような解決策を与えてください。各ポストは固定されたxの高さを与えます。ポストの下部に "read more"ユーザーがクリックしたときに欠落部分。その場合、画面上のアイテムの数を一定に保つことができます。さらに、画面の解像度を確認して、多かれ少なかれアイテムを置くことができます。