Ionic JavaScript滚动

在Ionic应用程序中用于滚动操作的元素称为 Ionic滚动 。

使用滚动

以下代码片段将创建可滚动容器并调整滚动模式。首先，我们将创建HTML元素并为其添加属性。我们将添加→ direction =“xy” 以允许滚动到每一侧。我们还将设置scroll元素的宽度和高度。

HTML代码

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

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

CSS代码

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

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

Ionic Javascript Scroll Start

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

IonicJavascript滚动结束

还有其他属性，可以应用于 Ionic滚动 。您可以在下表中查看它们。

滚动属性

属性	类型	详细
direction	string	滚动的可能方向。默认值为y
delegate-handle	string	用于使用$ ionicScrollDelegate进行滚动识别。
locking	boolean	用于一次锁定一个方向的滚动。默认值为true。
paging	boolean	用于确定分页是否将与滚动一起使用。
on-refresh	expression	被称为拉动刷新。
on-scroll	expression	滚动时调用。
scrollbar-x	boolean	是否应显示水平滚动条。默认值为true。
scrollbar-y	string	是否应显示垂直滚动条。默认值为true。
zooming	boolean	用于应用双指缩放。
min-zoom	integer	最小缩放值。
max-zoom	integer	最大缩放值。
scrollbar-x	boolean	用于启用弹跳。在Android上，IOS上的默认值为true。

无限滚动

当滚动通过页面底部时，无限滚动用于触发某些行为。以下示例显示了这是如何工作的。在我们的控制器中，我们创建了一个用于向列表中添加项目的功能。当滚动通过加载的最后一个元素的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');
   };
})

其他属性也可以与 Ionic无限滚动一起使用 。其中一些列在下表中。

滚动属性

属性	类型	详细
on-infinite	expression	滚动到底部时应该调用什么。
distance	string	距离底部的距离需要触发无限表达。
spinner	string	装载时应显示什么旋转器
immediate-check	Boolean	加载屏幕时应该调用“on-infinite”

滚动代表

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();
   };
})

上面的代码将生成以下屏幕

IonicJavascript滚动底部

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

IonicJavascript滚动顶部

现在，我们将介绍所有 $ ionicScrollDelegate 方法。

代表方法

方法	参数	类型	详细
scrollTop(parameter)	shouldAnimate	boolean	应滚动动画。
scrollBottom(parameter)	shouldAnimate	boolean	应滚动动画。
scrollTo(parameter1, parameter2, parameter3)	left, top, shouldAnimate	number, number, integer	前两个参数确定x和y轴偏移的值。
scrollBy(parameter1, parameter2, parameter3)	left, top, shouldAnimate	number, number, integer	前两个参数确定x和y轴偏移的值。
zoomTo(parameter1, parameter2, parameter3, parameter4)	level, animate, originLeft, originTop	number, boolean, number, number	level用于确定要缩放的级别。originLeft和originRight协调缩放应该发生的位置。
zoomBy(parameter1, parameter2, parameter3, parameter4)	factor, animate, originLeft, originTop	number, boolean, number, number	factor用于确定要缩放的因子。originLeft和originRight协调缩放应该发生的位置。
getScrollPosition()	/	/	返回具有两个数字作为属性的对象：left和right。这些数字分别代表用户从左侧和顶部滚动的距离。
anchorScroll(parameter1)	shouldAnimate	boolean	它将滚动到与window.location.hash具有相同id的元素。如果此元素不存在，它将滚动到顶部。
freezeScroll(parameter1)	shouldFreeze	boolean	用于禁用特定滚动的滚动。
freezeAllScrolls(parameter1)	shouldFreeze	boolean	用于禁用应用程序中所有滚动的滚动。
getScrollViews()	/	object	返回scrollView对象。
$getByHandle(parameter1)	handle	string	用于将方法连接到具有相同句柄的特定滚动视图。 $ionicScrollDelegate. $getByHandle('my-handle').scrollTop();