如何使用新的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高度，如果它需要更多的空间把“读更多”链接在帖子的底部，这将揭示用户点击时缺少部分。在这种情况下，您可以在屏幕上保留固定的项目数。此外，您可以检查屏幕分辨率，以放置更多或更少的物品。