Question

我正在尝试进行自动分页，如果用户到达页面底部并且有更多要显示的元素，则会加载（按6），如果没有，则显示页脚。

问题似乎是需要显示其他元素的地方，因为函数被调用并正常工作（我认为），但其他卡片不会显示在屏幕上。

你能告诉我我在这里错过了什么让它按照预期工作吗？

这是我到目前为止所做的：

<!-- Mobile result cards -->
          <div class="col-xs-12 hidden-sm hidden-md hidden-lg" ng-show="loading && showMobileResults" ng-if="isMobile">
            <img class="loading-img" src="img/loading_animation.gif"/>
          </div>
          <div id="mobile-result-cards" class="col-xs-12 text-center hidden-sm hidden-md hidden-lg" ng-show="!loading && showMobileResults">
              <p id="results-count">We found {{resultsPagination.totalEvents}} {{(resultsPagination.totalEvents===1)? 'result' : 'results'}}</p>
                <div class="search-results-cards">
                   <result-card-mobile ng-repeat="baEvent in eventsToDisplayPartial"
                                  ba-event="baEvent"
                                  ng-click="navigateToEventDetail(baEvent.id, baEvent.name)">
                    </result-card-mobile>
                    <div id="showMoreEventsMobile" class="col-xs-12 text-center" ng-show="showMoreEvents" style="margin: 20px auto; height: 50px;"></div>
                </div>
          </div>             
          <!-- End mobile result cards -->

并在控制器中

var init = function(){
    $(window).scroll(function () {
        detectScroll();
    });
};

    var detectScroll = function(){
    var offY = $(document).scrollTop();
    console.log(offY);
    if(offY > $scope.distanceToScroll){
        $scope.showMoreEvts();
    }
};

var setMobileResults = function(){
    $scope.eventsToDisplayPartial = [];
    for (var i = 0; i < 6; i++){
        if($scope.eventsToDisplay[i] != "" && $scope.eventsToDisplay[i] != "undefined" && $scope.eventsToDisplay[i] != null){
            $scope.eventsToDisplayPartial.push($scope.eventsToDisplay[i]);
        }
    }
    if($scope.eventsToDisplay.length > tempNumber){
        tempNumber = tempNumber + 6;
        $scope.showMoreEvents = true;
        $scope.loading = true;
        //$scope.$apply($('#mobile-result-cards'));

    } else {
        $scope.showMoreEvents = false;
        $scope.loading = false;
    }
};

$scope.showMoreEvts = function(){
    $scope.showMoreEvents = false;
    //$scope.$apply($('#mobile-result-cards'));

    for (var i = (tempNumber - 6); i < tempNumber; i++){
        if($scope.eventsToDisplay[i] != "" && $scope.eventsToDisplay[i] != "undefined" && $scope.eventsToDisplay[i] != null){
            $scope.eventsToDisplayPartial.push($scope.eventsToDisplay[i]);
        }
    }
    if($scope.eventsToDisplay.length > tempNumber){
        tempNumber = tempNumber + 6;
        $scope.showMoreEvents = true;
        $scope.loading = true;
        $scope.distanceToScroll += 870;
        console.log($scope.distanceToScroll);
        //$scope.$apply($('#mobile-result-cards'));

    } else {
        $scope.showMoreEvents = false;
        $scope.loading = false;
    }
};

init();

谢谢！

自动分页不会在页面上显示更多元素（angularJs / JQuery）

0 个答案: