Question

我在angularjs中进行无限滚动的演示，而且我是angularjs的新手。我正在使用gonsen ui进行演示，我想为我的应用程序实现无限滚动功能。它使用普通的<ul>和<li>元素完美地工作但是当我使用无限滚动停止工作时，我不知道为什么它不能解决我的问题代码。

HTML

<ons-page data-ng-controller='Listingcontroller'>
    <ons-toolbar style="background: #da1e3e;" fixed-style>
   <div class="left">
       <ons-back-button onclick = "hide()">Back</ons-back-button>
   </div>
        <div class="center" >Listing</div>
   <div class="right" style="position: relative;">
     <span class="toolbar-button--quiet navigation-bar__line-height" ng-click="gallery.pushPage('filter.html',{params:'+{{filteid}}'});" style="border: none; padding: 0 0 4px 0;">
       <i class="ion-android-options" style="font-size:24px; color: #FFFFFF;"></i>
     </span>

    <span class="toolbar-button--quiet navigation-bar__line-height" style="padding: 0;">
        <i class="ion-android-more-vertical" role="menu" style="font-size: 26px; margin: 0; padding: 0 12px;" dropdown-menu="ddMenuOptions" dropdown-model="ddMenuSelected" dropdown-disabled="dropdownsDisabled"></i>         
    </span>
   </div>
 </ons-toolbar>
  <div>
    <ons-list    class="list ons-list-inner list--categories"  when-scrolled='more()'>
      <ons-list-item data-ng-repeat="item in items" modifier="chevron" ng-model="vm.catid" class="list-item-container" ng-click="gallery.pushPage('detail-page.html',{params:'+{{catid}}'});">
        {{item.title}}
        <img src={{item.img}} class="thumbnail" style = "width: 100px;height:100px">
        <div class="rating">
                <i class="ion-android-star" style="color: #ffb400;"></i>
                <i class="ion-android-star" style="color: #ffb400;"></i>
                <i class="ion-android-star" style="color: #ffb400;"></i>
                <i class="ion-android-star" style="color: #ffb400;"></i>                
                <i class="ion-android-star"></i>
              </div>
      </ons-list-item>
    </ons-list>
   <div data-ng-show='loading'>Loading</div>
  </div>

   </div>
  </div>

</ons-page>

JS

var app= angular.module('app',['onsen','angular-images-loaded','ngMap','angular-carousel','ngDropdowns']);
     app.controller("Listingcontroller", function($scope, $http){
        var vm=this;
             var Start = '0';
             var Pagesize = '10';
             var SearchTxt = '';
             var FilterTxt = '';
             var FilterStarSearch = '';
             var FilterPriceSearch = '';
             var FilterLocationSearch = '';
             var FilterCuisineSearch = '';
             var FilterCategorySearch = '';
             var FkCategory ='1';
             //var title = page.options.params2;

      // the array which represents the list
      $scope.items = [];
      $scope.loading = true;

      // this function fetches a random text and adds it to array
      $scope.more = function(){
        $http({

                method: 'POST',
                url:  API_HOST+'/webservice/listinglist',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'caymanauth': caymanauth
                },
                                      data: "&Start="+cnt+"&Pagesize="+Pagesize+"&SearchTxt="+SearchTxt+"&FilterTxt="+''+"&FilterStarSearch="+FilterStarSearch+"&FilterPriceSearch="+FilterPriceSearch+"&FilterLocationSearch="+FilterLocationSearch+"&FilterCuisineSearch="+FilterCuisineSearch+"&FilterCategorySearch="+FilterCategorySearch+"&FkCategory="+FkCategory


          }).success(function(data, status, header, config){
              cnt += 10;
     var i;

      for (i = 0 ; i< data['Details'].length ; i++)
                {

                    console.log("==========rating========="+rating);

                    var  newItem = data['Details'][i]['varTitle'];
                    var  img =  API_HOST+'/cache/business/images/337_224/'+data['Details'][i]['varCompanyLogo'];
                    var rating =data['Details'][i]['review'];
                    var  desc = data['Details'][i]['varDescBusiness'];
                    var loc = data['Details'][i]['location'];
                    var id =  data['Details'][i]['intGlCode'] ;


                    $scope.items.push({title:newItem},{id:id},{img:img},{rate:rating},{desc:desc},{loc:loc});

                }
          $scope.loading = false;

        });
      };

      // we call the function twice to populate the list
      $scope.more();

    vm.submit = function(list){

            gcat = list.id;

            gallery.pushPage("list-page.html",{params:gcat});
           // gallery.pushPage("detail-page.html",{params:Cat_Id});

      };
    });''

Answer 1

看起来您正在使用angular-whenScrolled，但不包括您应用中的模块。

将依赖项添加到您的应用中，如下所示：

var app = angular.module('app', 
     ['onsen','angular-images-loaded','ngMap','angular-carousel','ngDropdowns', 'angular-whenScrolled']);

显然，javascript文件也需要包含在页面中。

See the angular-whenScrolled documentation

无限滚动在angularjs中的onsen列表中不起作用

1 个答案: