如何使用新的Firebase（2016）實現無限滾動？

Question

問題：

如何使用JavaScript（Node.js的和）實施有效的火力地堡的無限滾動？

---

什麼我檢查：

Implementing Infinite Scrolling with Firebase?

問題：舊的火力^

Infinite scroll with AngularJs and Firebase

---

代碼： 「 Infinite scroll with AngularJs and Firebase

」首先，我建議您在Firebase中創建一個索引。對於這樣的回答，我創造這一個：

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

然後，讓我們做一些魔術與火力地堡：

// @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; 
} 

最後，有較好的無限滾動（沒有的jQuery）：

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

我在React中使用這種方法，無論你的數據有多大，它都很快。「

（回答O CT 26 '15在15:02）

（由Jobsamuel）

---

問題

在該溶液中，n職位將各滾動到達高度的端部時加載的屏幕。

根據屏幕尺寸的不同，這意味着更多的帖子會比某些時候需要加載的帖子更多（屏幕高度只包含2個帖子，這意味着每次到達結尾時都會加載3個以上的帖子）當例如n = 5時的屏幕高度）。

這意味着3*NumberOfTimesScrollHeightHasBeenPassed每當我們到達scrollHight的末尾時會加載比所需更多的帖子。

---

我當前的代碼（負載的所有帖子一次，沒有無限滾動）：

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高度，如果它需要更多的空間把「讀更多」鏈接在帖子的底部，這將揭示用戶點擊時缺少部分。在這種情況下，您可以在屏幕上保留固定的項目數。此外，您可以檢查屏幕分辨率，以放置更多或更少的物品。