文章/答案/技术大牛

发布

社区首页 >问答首页 >ngInfiniteScroll不工作

问ngInfiniteScroll不工作
EN

Stack Overflow用户

提问于 2015-11-30 17:55:47

回答 3查看 17.3K关注 0票数 10

我正试图使ngInfiniteScroll发挥作用，但却是徒劳的-- 柱塞。滚动事件只在页面加载时触发，之后似乎不会触发它。有人能给我点光吗。

我试过不同的组合，但都没有用：

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container="'#list-wrapper'" 

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent

infinite-scroll='loadMore()' infinite-scroll-distance='2'

HTML:

<body ng-app="app" ng-controller="listController">
      <div id="list-wrapper">
          <div class="list" infinite-scroll='loadMore()' 
        infinite-scroll-distance='2' 
        infinite-scroll-container="'#list-wrapper'">
            <div class="header">

            </div>

            <div class="list-table" >
                <table class="table">
                    <tbody>
                        <tr ng-repeat="item in infiniteList">
                            <td style="width:100%">
                                <div>{{item}}</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style='clear: both;'></div>
            </div>
      </div>

JS:

var app = angular.module("app", ['infinite-scroll']);

app.controller('listController', ['$scope','$http', function ($scope,$http) {
    $scope.infiniteList = [];
    $scope.incr = 1;

    $scope.loadMore = function(){
      console.log("scroll");
        for(var i = 0; i< 30; i++){
            $scope.infiniteList.push("Item " + $scope.incr);
            $scope.incr +=1;
        }
    };

}]);

nginfinitescroll

javascript

angularjs

infinite-scroll

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-11-30 18:56:23

编辑:您正在使用ngInfinite Scroll的最新稳定版本，它没有-container和-parent方法，我已经用开发的ngInfiniteScroll.js更新了柱塞，现在您可以在这里看到工作代码：

http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview

旧：

当元素底部接近浏览器窗口底部时，ngInfiniteScroll将调用myPagingFunction()

因此，如果您更改css并移除最大高度，以便列表覆盖页面，那么当用户滚动通过页面时，您将看到无限滚动器正在工作。

#list-wrapper{
    //max-height: 400px;
    overflow-y: scroll;

    margin-top: 20px;
    border: solid 1px black;
}

http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview

另见：容器中的无限滚动

票数 10

Stack Overflow用户

发布于 2016-08-12 23:00:05

检查主HTML或body标记。它们可能包含一些溢出css。因此，在这种情况下，页面滚动必须是包装器。

body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}

和

    <div infinite-scroll='getMoreListingData()' infinite-scroll-disabled='isbusy'
     infinite-scroll-distance='0'
     infinite-scroll-container="'body'">

这救了我的命。

票数 4

Stack Overflow用户

发布于 2016-10-11 12:49:47

您可以签出1.3.0版本，它执行对“无限滚动父”的检查。

如果您正在使用保龄球：保龄球安装-保存ngInfiniteScroll#1.3.0

<div class="scroll-container"> <!-- Fixed height is OK -->
    <div infinite-scroll="vm.notifications.loadMore()" infinite-scroll-distance='1' infinite-scroll-immediate-check='true' infinite-scroll-parent="true">

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34004914

复制

相似问题

问ngInfiniteScroll不工作
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ngInfiniteScroll不工作EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ngInfiniteScroll不工作
EN