javascript - 多重 ionic 卷轴，无限卷轴-6ren

javascript - 多重 ionic 卷轴，无限卷轴

转载作者：数据小太阳更新时间：2023-10-29 05:32:42

27

4

我有两个 ionic 滚动标签。在每个 ion-scroll 标签中都有一个列表。这些列表中的每一个都以 10 个项目开始，当用户到达特定 ionic 卷轴的底部时，它应该加载更多。我面临的问题是这无法正常工作。如果我滚动第一个滚动窗口并对所有项目进行分页，它应该不会再显示任何内容。但这并没有发生，相反，如果我滚动第二个滚动窗口，那么它将在第一个和第二个 ionic 滚动窗口(我不想要)中加载更多项目。本质上我希望两个 ionic 卷轴完全独立。我希望每个人都加载自己的内容。我希望这是有道理的。这是我的代码笔:

http://codepen.io/polska03/pen/jWKRwP

HTML:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>
  <body ng-app="ionicApp" ng-controller="MyCtrl" class="background-places">

    <ion-view>
    <ion-content class="" scroll='false'>
        <ion-scroll style="height:50%">
            <ion-list>
                <ion-item collection-repeat="list in _list">
                    <h2>Item</h2>
                </ion-item>
            </ion-list>
            <button class="button button-full button-outline button-positive" ng-if="noMoreContent">
      No more Content
   </button>
            <ion-infinite-scroll ng-if="canWeLoadMoreContent()" on-infinite="populateList()" distance="1%">
            </ion-infinite-scroll>
        </ion-scroll>

<hr>
<hr>

        <ion-scroll style="height:50%">
            <ion-list>
                <ion-item collection-repeat="list2 in _list2">

                    <h2>Item</h2>

                </ion-item>
            </ion-list>



            <button class="button button-full button-outline button-positive" ng-if="noMoreContent2">
       No More Content
     </button>
            <ion-infinite-scroll ng-if="canWeLoadMoreContent2()" on-infinite="populateList2()" distance="1%">
            </ion-infinite-scroll>
        </ion-scroll>

    </ion-content>

</ion-view>


  </body>
</html>

Javascript:

angular.module('ionicApp', ['ionic'])

  .controller('MyCtrl', function($scope) {






  $scope._list = [];

  $scope.populateList = function() {
    for (var i = 0; i <= 9; i++) {


      $scope._list.push({});
    }
    console.log($scope._list.length);
    $scope.$broadcast('scroll.infiniteScrollComplete');
  }

  $scope.noMoreContent = false;

  $scope.canWeLoadMoreContent = function() {
    if($scope._list.length > 15) {
      $scope.noMoreContent = true;

      return false;
    }else{
      return true;
    }
  }
  $scope.populateList();





  $scope._list2 = [];

  $scope.populateList2 = function() {
    for (var i = 0; i <= 9; i++) {



      $scope._list2.push({});

    }
    console.log($scope._list2.length);
    $scope.$broadcast('scroll.infiniteScrollComplete');
  }

  $scope.noMoreContent2 = false;

  $scope.canWeLoadMoreContent2 = function() {
    if($scope._list2.length > 15) {
      $scope.noMoreContent2 = true;

      return false;
    }else{
      return true;
    }
  }



  $scope.populateList2();




});

最佳答案

问题来自指令中未正确解决的'require' ?^ionicScroll。不知道为什么，因为我不是 AngularJS 专家。也就是说，我找到了一种解决方法，即在内容标签周围插入一个额外的 div，如 http://codepen.io/priand/pen/PzYbZG 中所示。，如果这对某人有帮助。

<div>
<ion-content class="has-header col col-50">
  <ion-list>
    <ion-item ng-repeat="item in items" 
              item="item">
      Item {{ item.id }}
    </ion-item>
  </ion-list>
  <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</div>

<div>
<ion-content class="has-header col col-offset-50 col-50">
  <ion-list>
    <ion-item ng-repeat="item in items2" 
              item="item">
      Item {{ item.id }}
    </ion-item>
  </ion-list>
  <ion-infinite-scroll ng-if="!noMoreItemsAvailable2" on-infinite="loadMore2()" distance="10%"></ion-infinite-scroll>      
</ion-content>
</div>

关于javascript - 多重 ionic 卷轴，无限卷轴，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35140875/

27

4

0

文章推荐： swift - UIButton 心跳动画

文章推荐： javascript - ES2015 解构为对象

javascript - 如何使列表项滚动动画看起来连续/无限
我有 3 个列表项，每 3 秒向上旋转一次。我正在使用 transformY 属性来做这件事。问题是，当它到达最后一个元素时，它会循环返回，从而产生重新开始的效果。如何通过在最后一项之后继续向上旋转
无限/重复世界的数学/计算与旋转
我如何制作一个处理旋转的无限/重复世界，就像在这个游戏中一样: http://bloodfromastone.co.uk/retaliation.html 我通过具有这样的层次结构对我的旋转移动世界进
javascript - 是否可以不限制字符重复的正则表达式范围的上限值(无限)？
这个问题已经有答案了: Using explicitly numbered repetition instead of question mark, star and plus (4 个回答) 已关闭
java - 无限 while 循环以及读取文件时出现问题
程序说明: I have this program of mine which is intended to read every word from a file (large one) and t
java - 无限 While 循环
while 循环应该比较这两个对象的 ibsn。正在比较的对象: list[0] = new ReadingMatter ("Words and Stuff", "9-082-1090-1");
JavaScript 无限 For 循环
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
c - 无限 while 循环中的信号
我完全被屏蔽了。我尝试修改 C 中的“警报”信号，以便在秒数到期时读取一个简单的变量。我的代码如下: 在主要部分: int semnal; signal(SIGALRM, alarmHandle
Java 无限 While 循环
我正在接受多行信息(字符串，直到我稍后解析它们)。例如: 1 5 0 2 9 6 2 9 1 我编写这段代码来分隔行，因为我将不得不以某种方式操作每一行。 Scanner scan = new Sca
javascript - 如何制作动态名称选择器(无限)
我不熟悉 jQuery，并且我有多余的 jQuery 调用，我想将它们放入循环中。 $('.class1').on('click', function () { ... $('.class2').on
php - 广度优先搜索方式的一般树遍历(无限)
我有一个树结构，其中每个节点都有 5 个子节点，并且不允许超过 5 个。我希望以广度优先搜索的方式遍历这棵树。现在我想使用广度优先搜索方式从选定的父节点计算空节点。例如如果给定的父节点为 1，则
PHP 无限 while 循环阻止对脚本的其他调用
目标/动机我想写一个服务，它应该一直运行。但是当服务已经运行时，应该不可能再次启动该服务。用例用户 X 打开页面 myService.php 并通过单击页面上的按钮启动服务。之后关闭浏览器。一段
c++ - “无限”未在此范围内声明
我正在尝试编译 shogun 工具箱，但遇到了这个错误 C:/shogun-3.0.0/shogun-3.0.0/src/shogun/../shogun/mathematics/Math.h
javascript - 无限 6 面骰子滚轮
需要学校的 JavaScript 作业帮助，但不知道该怎么做，希望得到一些提示？我们应该创建一个 6 面掷骰子程序，用户可以选择应该掷多少个骰子，最少 1 个和最多 5 个骰子。所用骰子数量的总和
iphone - 无限 ScrollView 的动画
我在无限 ScrollView 中有 5 张图片。因此，为了使 scrollView 无限/循环，我将图像定位如下: 5 1 2 3 4 5 1含义:最后一张图片第一张图片第二张图片.....最后一
elixir - 如何中断(无限)流？
我正在使用 ExTwitter库，并希望能够偶尔终止对流式 API 的调用以更改参数。我当前的代码看起来像这样: for tweet #finished end 关于elixir - 如何中断(无
Javascript/jQuery - 动画背景随着淡入淡出而变化(无限)
我想每 3 秒更改一次 div 的背景。这需要循环，因此一旦最后一个背景图像显示，它就会循环回到第一个背景图像，依此类推。我在这样做时遇到了麻烦。我之前发过一篇文章，内容非常模糊，没有得到帮助。
javascript - AngularJS:无限$digest循环错误？
我在做this教程，无法让我的页面正确加载。我不断在控制台中收到错误:[$rootScope:infdig]。我对 Angular 很陌生，但从我读到的内容来看，我在某个地方有一个无限循环。我预计它
javascript - 无限 asyncIterator 未按预期工作
所以我试图创建一个无限的 asyncIterator/生成器。该代码应该为“for wait of”循环生成“Hello”和“Hi”，然后永远等待下一个值。问题是它不等待第三个值，也不在循环后打印 2
javascript - 无限 Canvas 背景滚动无卡顿
下图显示了我如何在 HTML5/JS 中制作无限背景滚动。我的连续背景由 X block Canvas 组成。我将在到达下一个 Canvas 之前立即渲染它，并释放上一个 Canvas。这里的问题是动
storage - 无限(或非常高)长度的整数存储
作为一个业余项目，我正在研究一些自制的素数生成问题，尝试编写一些不同的实现作为自学 C 和 C++ 的方法。当然，生成低素数的最快方法是已经拥有它们，所以我想着手建立一个硬盘素数列表数据文件。我想编写

首页

博学

6Ren·AI

商城

javascript - 多重 ionic 卷轴，无限卷轴