Angular Material - 虛擬滾動

md-virtual-repeat-container 是 md-virtual-repeat 元件的滾動容器。

屬性

下表列出了 md-virtual-repeat-container 不同屬性的引數和描述。

序號	引數及描述
1	md-top-index 將滾動容器頂部專案的索引繫結到 $scope。它可以讀取和設定滾動位置。
2	md-orient-horizontal 確定容器是否應水平滾動（預設為垂直方向和滾動）。
3	md-auto-shrink 如果存在，則當專案數量小於其原始大小時，容器將縮小以適應專案數量。
4	md-auto-shrink-min md-auto-shrink 將縮小的最小專案數（預設為 0）。

md-virtual-repeat

虛擬重複是 ng-repeat 的替代品，它只渲染足夠的 html 元素來填充容器，並在使用者滾動時重複使用它們。

屬性

下表列出了 md-virtual-repeat 不同屬性的引數和描述。

序號	引數及描述
1	md-item-size 重複元素的高度或寬度（每個元素必須相同）。這是可選的。如果缺少此屬性，它會嘗試從 DOM 中讀取大小，但仍然假設所有重複節點具有相同的高度或寬度。
2	md-extra-name 計算結果為一個額外的名稱，可以在重複的範圍內為當前迭代項分配該名稱（在 md-autocomplete 中使用時需要）。
3	md-on-demand 如果存在，則將 md-virtual-repeat 引數視為可以獲取行的物件，而不是陣列。此物件必須實現以下具有兩種 (2) 方法的介面： getItemAtIndex − function(index) [object] - 該索引處的專案，如果尚未載入，則為 null（在這種情況下，它應該開始下載該專案）。 getLength − function() [number] - 重複容器應調整為的大小資料長度。理想情況下，如果知道計數，此方法應返回它。否則，返回大於當前載入項的數量，以產生無限滾動的行為。

序號

引數及描述

md-item-size

重複元素的高度或寬度（每個元素必須相同）。這是可選的。如果缺少此屬性，它會嘗試從 DOM 中讀取大小，但仍然假設所有重複節點具有相同的高度或寬度。

md-extra-name

計算結果為一個額外的名稱，可以在重複的範圍內為當前迭代項分配該名稱（在 md-autocomplete 中使用時需要）。

md-on-demand

如果存在，則將 md-virtual-repeat 引數視為可以獲取行的物件，而不是陣列。此物件必須實現以下具有兩種 (2) 方法的介面：

getItemAtIndex − function(index) [object] - 該索引處的專案，如果尚未載入，則為 null（在這種情況下，它應該開始下載該專案）。
getLength − function() [number] - 重複容器應調整為的大小資料長度。理想情況下，如果知道計數，此方法應返回它。否則，返回大於當前載入項的數量，以產生無限滾動的行為。

示例

以下示例顯示了虛擬重複的使用。

am_virtualrepeat.htm

線上演示

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .vrepeatContainer #horizontal-container {
            height: 100px;
            width: 830px; 
         }

         .vrepeatContainer #vertical-container {
            height: 292px;
            width: 400px; 
         }

         .vrepeatContainer .repeated-item-horizontal {
            border-right: 1px solid #ddd;
            box-sizing: border-box;
            display: inline-block;
            height: 84px;
            padding-top: 35px;
            text-align: center;
            width: 50px; 
         }

         .vrepeatContainer .repeated-item-vertical {
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
            height: 40px;
            padding-top: 10px;
         }

         .vrepeatContainer md-content {
            margin: 16px; 
         }
         
         .vrepeatContainer md-virtual-repeat-container {
            border: solid 1px grey; 
         }	  
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('vrepeatController', vrepeatController);
           
         function vrepeatController ($scope) { 
            this.items = [];
            for (var i = 0; i < 1000; i++) {
               this.items.push(i);
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "vrepeatContainer" ng-controller = "vrepeatController as ctrl"
         ng-cloak>
         <md-content layout = "column">
            <h2>Horizontal Repeat</h2>
            <md-virtual-repeat-container id = "horizontal-container" md-orient-horizontal>
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-horizontal" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
            <h2>Vertical Repeat</h2>
            <md-virtual-repeat-container id = "vertical-container">
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-vertical" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
         </md-content>
      </div>
   </body>
</html>

結果

驗證結果。

列印頁面