javascript - 如何使用 firebase 按降序在我的无限滚动中首先显示我的热门帖子?

标签 javascript angularjs firebase firebase-realtime-database

我试过的(不能正常工作):

代码:

<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']);


问题:

我如何还原数据客户端以根据他们的分数(从最高到最低)从上到下获取我的帖子?


我想要实现的目标:

根据分数降序获取我的帖子,这对于无限滚动有点棘手。

最佳答案

由于帖子是倒序显示的,你应该将“页”的顺序倒过来(使用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')

关于javascript - 如何使用 firebase 按降序在我的无限滚动中首先显示我的热门帖子?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41433089/

相关文章:

java - 如何使用android检查firebase中是否存在值?

javascript - 没有 'on' 订阅的缓存

javascript - 如果我的类的任何实例被单击隐藏 elem (纯 JS)

javascript - 如何使用水平滚动在容器内设置父级绝对位置的 li 元素定位

html - 如何删除summernote值中的<p><br></p>标签?

javascript - 我的范围变量不会在 html View 中更新

javascript - 找不到模块 : Can't resolve 'react-datepicker

javascript - 无法访问 $.each 中的对象属性

javascript - 第二次单击时 Angular ng-click 切换

firebase - 如何更改Firebase项目的支持电子邮件?