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方法。

委託方法