页面加载时调用的离子无限滚动功能

贾德·萨尔哈尼(Jad Salhani)

我正在使用离子框架创建基本的Feed应用。我可以继续学习,但是离子无限滚动却遇到了麻烦。

Feed.html

<ion-content ng-controller="FeedController" > 
    <ion-refresher pulling-text="Pull to refresh.." on-refresh="get_feeds()" refreshing-text="Fetching ..." refreshing-icon="ion-loading-b">
    </ion-refresher>
    <ion-list>
        <ion-item ng-repeat="question in questions">
            <div class="item item-divider">
{{question.question}}
            </div>
            <div class="item" ng-bind-html="question.answer | trustHtml">
            </div>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll
        on-infinite="get_more()"
        distance="1%">
    </ion-infinite-scroll>
</ion-content>

Feed.js

 (function(){
    "use strict";
    angular.module( 'app.controllers' ).controller( 'FeedController', 
        [ 'eTobb', 'Users', '$scope', '$timeout', function( eTobb, Users, $scope, $timeout) {

            var pageIndex = 1;

            $scope.questions = [];

            $scope.get_feeds = function(pageIndex){
                eTobb.get($scope.apiCall, { user_id: Users.id, page: 0 }, function(response) {
                    if ( response ){
                        $scope.questions = $scope.questions.concat(response);
                        console.log($scope.questions);
                    }
                })
                .finally(function(){
                    $scope.$broadcast('scroll.refreshComplete');
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
            };

            $scope.get_more = function(){
                $scope.get_feeds(pageIndex);
                pageIndex = pageIndex + 1; 
                console.log('why the hell am i being called?');
            };
        }
        ]);
})(); 

问题

加载页面时,在on-infinite属性上定义的方法将调用两次,然后在每次到达页面底部时(通常)调用一次。有谁知道为什么会这样吗?

RMD

我也遇到了这个问题,但是使用ng-if并不能解决问题,我也不认为这是解决此问题的正确方法。

根据Ionic的文档,您只能使用ng-if来指示没有更多可用数据,并防止无限滚动器对“ get_more”方法进行附加调用。

我发现是在页面加载期间发生此意外“ get_more()”调用的原因,是由于无限滚动器认为在第一次加载期间没有足够的内容(即:初始加载没有提供足够的结果来填充页),因此它立即启动了另一个加载请求。

在我的特定情况下,我返回了足够多的记录来填充页面,但是无限滚动器仍在请求更多。我的列表中大部分都是图像,由于滚动图像加载时间和检查页面是否填充之间的时间问题,滚动条不恰当地调用了“ get_more()”。

无论如何,解决我的问题的方法是告诉它不要在加载时立即执行边界检查。您可以使用即时检查属性来执行此操作,即:

<ion-infinite-scroll immediate-check="false" on-infinite="vm.localDataManager.getData()" ng-if="vm.localDataManager.canGetData()" distance="1%">

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

更改功能仅在页面加载时调用

来自分类Dev

ResizeObserver最初在页面加载时调用吗?

来自分类Dev

在特定元素加载时调用功能

来自分类Dev

离子无限滚动

来自分类Dev

滚动功能也会在页面加载时执行

来自分类Dev

您如何在HTML页面加载时调用PHP脚本?

来自分类常见问题

如何在页面加载时调用vue.js函数

来自分类Dev

如何避免在页面加载时调用敲除绑定?

来自分类Dev

如何在JSP页面加载时调用Servlet

来自分类Dev

如何在初始页面加载时调用JavaScript函数

来自分类Dev

Javascript:函数是在页面加载时调用的,而不是onclick / onsubmit

来自分类Dev

您如何在HTML页面加载时调用PHP脚本?

来自分类Dev

Microsoft Edge在页面加载时调用onload命名函数

来自分类Dev

使用$(window).resize和在初始页面加载时调用函数

来自分类Dev

Windows Phone Universal App错误在加载时调用异步功能

来自分类Dev

onPress在加载时调用

来自分类Dev

jQuery无限页面滚动

来自分类Dev

底部滚动到无限加载的页面,并在向上滚动时单击页面上存在的链接

来自分类Dev

AngularJS页面加载调用功能

来自分类Dev

无法使用离子花式选择指令调用角度控制器中存在的离子无限滚动方法

来自分类Dev

离子无限列表滚动与json url

来自分类Dev

用于在页面加载时调用的javascript函数的注册表(包括AJAX调用)

来自分类Dev

VueJs-内部div的滚动条达到页面底部时调用事件

来自分类Dev

为什么滚动功能在页面加载时触发?

来自分类Dev

在函数加载时调用函数

来自分类Dev

loadMoreRows未在加载时调用

来自分类Dev

延迟加载VS无限滚动

来自分类Dev

使用C#在asp.net中的页面加载时调用Java脚本函数

来自分类Dev

如何在ASP.NET中页面加载(更新/更改)时调用javascript(或jQuery)

Related 相关文章

  1. 1

    更改功能仅在页面加载时调用

  2. 2

    ResizeObserver最初在页面加载时调用吗?

  3. 3

    在特定元素加载时调用功能

  4. 4

    离子无限滚动

  5. 5

    滚动功能也会在页面加载时执行

  6. 6

    您如何在HTML页面加载时调用PHP脚本?

  7. 7

    如何在页面加载时调用vue.js函数

  8. 8

    如何避免在页面加载时调用敲除绑定?

  9. 9

    如何在JSP页面加载时调用Servlet

  10. 10

    如何在初始页面加载时调用JavaScript函数

  11. 11

    Javascript:函数是在页面加载时调用的,而不是onclick / onsubmit

  12. 12

    您如何在HTML页面加载时调用PHP脚本?

  13. 13

    Microsoft Edge在页面加载时调用onload命名函数

  14. 14

    使用$(window).resize和在初始页面加载时调用函数

  15. 15

    Windows Phone Universal App错误在加载时调用异步功能

  16. 16

    onPress在加载时调用

  17. 17

    jQuery无限页面滚动

  18. 18

    底部滚动到无限加载的页面,并在向上滚动时单击页面上存在的链接

  19. 19

    AngularJS页面加载调用功能

  20. 20

    无法使用离子花式选择指令调用角度控制器中存在的离子无限滚动方法

  21. 21

    离子无限列表滚动与json url

  22. 22

    用于在页面加载时调用的javascript函数的注册表(包括AJAX调用)

  23. 23

    VueJs-内部div的滚动条达到页面底部时调用事件

  24. 24

    为什么滚动功能在页面加载时触发?

  25. 25

    在函数加载时调用函数

  26. 26

    loadMoreRows未在加载时调用

  27. 27

    延迟加载VS无限滚动

  28. 28

    使用C#在asp.net中的页面加载时调用Java脚本函数

  29. 29

    如何在ASP.NET中页面加载(更新/更改)时调用javascript(或jQuery)

热门标签

归档