Ionic - JavaScript滚动

---

---

Ionic应用中用于滚动操作的元素称为ion-scroll。

使用滚动

下面的代码片段将创建可滚动的容器并调整滚动模式。首先，我们将创建HTML元素并向其添加属性。我们将添加→direction = "xy"以允许向各个方向滚动。我们还将设置滚动元素的宽度和高度。

HTML代码

<ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px">
   <div class = "scroll-container"></div>
</ion-scroll>

接下来，我们将世界地图的图像添加到我们在ion-scroll内部创建的div元素中，并设置其宽度和高度。

CSS代码

.scroll-container {
   width: 2600px;
   height: 1000px;
   background: url('../img/world-map.png') no-repeat
}

运行应用程序后，我们可以向各个方向滚动地图。以下示例显示了地图的北美部分。

我们可以将此地图滚动到任何我们想要的部分。让我们滚动它以显示亚洲。

还有其他属性可以应用于ion-scroll。您可以在下表中查看它们。

滚动属性

无限滚动

无限滚动用于在滚动超过页面底部时触发某些行为。以下示例显示了其工作原理。在我们的控制器中，我们创建了一个函数来向列表添加项目。当滚动超过加载的最后一个元素的10%时，这些项目将被添加。这将持续到我们达到30个加载的元素。每次加载完成后，on-infinite将广播scroll.infiniteScrollComplete事件。

HTML代码

<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>

控制器代码

.controller('MyCtrl', function($scope) {
   $scope.items = [];
   $scope.noMoreItemsAvailable = false;
   
   $scope.loadMore = function() {
      $scope.items.push({ id: $scope.items.length}); 

      if ($scope.items.length == 30) {
         $scope.noMoreItemsAvailable = true;
      }
   
      $scope.$broadcast('scroll.infiniteScrollComplete');
   };
})

其他属性也可以与ion-infinite-scroll一起使用。其中一些列在下表中。

滚动属性

滚动委托

Ionic 提供委托以完全控制滚动元素。可以通过将$ionicScrollDelegate服务注入控制器来使用它，然后使用它提供的 方法。

以下示例显示了一个包含20个对象的可滚动列表。

HTML代码

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
   <div class = "item">Item 7</div>
   <div class = "item">Item 8</div>
   <div class = "item">Item 9</div>
   <div class = "item">Item 10</div>
   <div class = "item">Item 11</div>
   <div class = "item">Item 12</div>
   <div class = "item">Item 13</div>
   <div class = "item">Item 14</div>
   <div class = "item">Item 15</div>
   <div class = "item">Item 16</div>
   <div class = "item">Item 17</div>
   <div class = "item">Item 18</div>
   <div class = "item">Item 19</div>
   <div class = "item">Item 20</div>
</div>

<button class = "button" ng-click = "scrollTop()">Scroll to Top!</button>

控制器代码

.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

   $scope.scrollTop = function() {
      $ionicScrollDelegate.scrollTop();
   };
})   

以上代码将生成以下屏幕：

点击按钮时，滚动将移动到顶部。

现在，我们将遍历所有$ionicScrollDelegate方法。

委托方法