Question

我对UI开发很新，所以请耐心等待。我正在尝试在网页上实现延迟加载。也就是说，当用户滚动到页面底部时，使用AJAX调用从服务器获取页面。希望做的是将新数据附加到现有数据。目前，新数据占据整个列表视图，滚动条移动到顶部。这是我的代码：

AJAX电话：

$scope.getMoreData=function(){
      updateAjaxData();
      var url=$scope.getURL();
      A.ajax(url, {
          method: 'post',
          params: AJAX_DATA,
          success: function(data, s, x) {
              $scope.providersList = JSON.parse(data.serviceproviderlist);
              $scope.serviceName = data.category;
              $scope.limit = SEARCH_LIMIT;
              $scope.$apply();
              var div = document.getElementById("spn-service-provider-list");
              var content = document.createTextNode($scope.providersList);
              div.appendChild(content);
          },
          error: function(xhr, statusText, errorThrown) {
              $scope.errorCallback(xhr);
          }
     });
  }

这是我的HTML：

<div id="spn-service-provider-list">
    <div class="spnsearch">
        <i class="spnicon spn-icon-search"></i> 
                <input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
    </div>
    <div id="spn-list" style="height:100vh;overflow-y:scroll;" when-scrolled="showMoreItems(filteredproducts.length,limit)">
            <div ng-repeat="providersList in ( filteredproducts = ( providersList | filter:{ providerName: spsearch } | filter:{ citiesServicing: locationsearch }:ignoreNullComparator ))  | orderBy: 'rank' | limitTo: limit " >
            ...................
            ...................

问题是当使用AJAX调用获取新页面时，它占用整个列表视图。也就是说，旧列表完全消失，新列表占据其位置，滚动条移动到顶部。此外，成功添加到我的列表中的是几个 [object]

以下是建议的代码，仍然没有变化：

success: function(data, s, x) {
              if($scope.providersList === null) {
                $scope.providersList = []; /* init if null */
              }
              /* Update the existing array */
              Array.prototype.push.apply($scope.providersList, JSON.parse(data.serviceproviderlist));
              $scope.serviceName = data.category;
              $scope.limit = SEARCH_LIMIT;
              $scope.$apply();
              viewToBeDisplayed(LIST_VIEW);
          },

Answer 1

因为您删除了现有的阵列所以替换

$scope.providersList = JSON.parse(data.serviceproviderlist);

带

if($scope.providersList == null) {
  $scope.providersList = []; /* init if null */
}
/* Update the existing array */
Array.prototype.push.apply($scope.providersList, JSON.parse(data.serviceproviderlist));

将AJAX调用提取的数据附加到已存在的延迟加载列表

1 个答案: