Question

我做了什么（做得不正确）：

CODE：

<script>

    var app = angular.module('app', ['firebase']);

    app.controller('ctrl', function ($scope, $firebaseArray, $timeout) {


            $scope.data = [];
            var _n = Math.ceil(($(window).height() - 50) / (350)) + 1;
            var start = 0;
            var end = _n - 1;
            var lastScore = <%=lastScore%>;
            console.log("FIRST FIRST FIRST LAST SCORE:" + lastScore);
            var firstElementsLoaded = false;

            $scope.getDataset = function() {

                fb.orderByChild('score').endAt(lastScore).limitToLast(_n).on("child_added", function(dataSnapshot) {

                    lastScore = dataSnapshot.child("score").val() - 1;
                    console.log("LAST TOP LIKED:"+ lastScore);

                    $scope.data.push(dataSnapshot.val());
                    $scope.$apply();
                    console.log("THE VALUE:"+$scope.data);

                    $scope.data.splice(start, end).concat($scope.data.reverse());
                    $scope.$apply();
                    start = start + _n;
                    end = end + _n

                    firstElementsLoaded = true;
                });

            };

            $scope.getDataset();

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

    });

    // Compile the whole <body> with the angular module named "app"
    angular.bootstrap(document.body, ['app']);

问题：

如何根据分数（从最高到最低）恢复数据客户端以使我的帖子从上到下获取？

我想要实现的目标：

根据得分降序获取我的帖子，无限滚动有点棘手。

Answer 1

由于帖子以相反的顺序显示，您应该颠倒＆＃34;页面＆＃34;（使用endAt而不是startAt）的顺序，并在每个页面中反向排序帖子。

另见this answer

示例

设定：

$scope.data = []; var n = Math.ceil(($(window).height() - 50) / (350)) + 1; var firstElementsLoaded = false; var lastScore = MAX_SCORE, lastKey

scroll事件监听器的功能：

$scope.getDataset = function() { fb.orderByChild('score') .endAt(lastScore, lastKey) //endAt is inclusive, take one more for the n-th .limitToLast(n + firstElementsLoaded) .once('value', loadPosts) function loadPosts(snapshot) { var posts = snapshot.val() function compare(a, b) { if (posts[a].score != posts[b].score) { return b.score - a.score } if (a < b) return 1 if (a > b) return -1 return 0 } //skip the post included by endAt var ordered = Object.keys(posts).sort(compare).slice(firstElementsLoaded) lastKey = ordered[ordered.length-1] lastScore = posts[lastKey].score ordered.forEach(function(key) { $scope.data.push(posts[key]) }) $scope.$apply(); firstElementsLoaded = true; } }

为了更优雅的方式，您可以反向尝试存储分数，或使用其他值。

fb.orderByChild('reversedScore')

Answer 2

我最终使用了inversedScore属性：

<script>

    var app = angular.module('app', ['firebase']);

    app.controller('ctrl', function ($scope, $firebaseArray, $timeout) {


            $scope.data = [];
            var _n = Math.ceil(($(window).height() - 50) / (350)) + 1;
            var firstElementsLoaded = false;
            var lastScore = -100000;


            $scope.getDataset = function() {

                fb.orderByChild('inversedScore').startAt(lastScore).limitToFirst(_n).on("child_added", function(dataSnapshot) {

                    lastScore = dataSnapshot.child("inversedScore").val() + 1;
                    console.log("LAST LIKE SCORE:"+ lastScore);

                    $scope.data.push(dataSnapshot.val());
                    $scope.$apply();
                    console.log("THE VALUE:"+$scope.data);

                    firstElementsLoaded = true;
                });

            };

            $scope.getDataset();

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

    });

    // Compile the whole <body> with the angular module named "app"
    angular.bootstrap(document.body, ['app']);

</script>

如何在我的无限卷轴中首先显示我的热门帖子，按照火力降序的降序排列？

2 个答案: