您的位置: 首页  >  文章  >  Ionic基础——列表ion-list

Ionic基础——列表ion-list

分类: 文章 • 2024-02-16 07:43:46

一.列表 : ion-list

   列表是常用的信息组织方式。在ionic中，使用ion-list指令声明列表 元素，使用ion-item指令声明成员元素：

[html] view plain copy
  1. <ion-list>   
  2.    <ion-item>...</ion-item>   
  3.    <ion-item>...</ion-item>   
  4.    ...   
  5. </ion-list>  
   ion-list指令提供以下属性用来定制列表的外观：

  • type - 列表种类。type属性是可选的，可用来设置列表的种类： list-inset | card。这两种列表 都产生内嵌的效果，区别在于card列表有边框的阴影效果。
  • show-delete - 是否显示成员内的delete按钮。show-delete属性是可选的。如果在成员内有delete按钮（ion-delete-button），使用这个 属性来通知列表是否显示元素删除按钮。允许的值为：true | false.
  • show-reorder - 是否显示成员内的reorder按钮。show-reorder属性是可选的。如果在成员内有reorder按钮（ion-reorder-button），使用这个 属性来通知列表是否显示元素重排序按钮。允许的值为：true | false.
  • can-swipe - 是否支持滑动方式显示成员option按钮。can-swipe属性是可选的。如果在成员内有option按钮（ion-option-button），使用这个 属性来允许或禁止通过向左滑动成员来打开option按钮。允许的值为：true | false ，默认为true。
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <script src="../lib/js/ionic.bundle.min.js"></script>  
  7.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  8.   
  9. </head>  
  10. <body  ng-controller="myCtrl">  
  11.     <ion-header-bar class="bar-positive">  
  12.         <h1 class="title">ion-list</h1>  
  13.     </ion-header-bar>  
  14.     <ion-content>  
  15.         <ion-list can-swipe="true">  
  16.             <ion-item ng-repeat="item in items">  
  17.             {{item}}  
  18.                 <ion-option-button class="button-calm icon ion-edit"></ion-option-button>  
  19.                 <ion-option-button class="button-energized icon ion-share"></ion-option-button>  
  20.             </ion-item>  
  21.         </ion-list>  
  22.     </ion-content>  
  23. </body>  
  24. </html>  
  25.   
  26. <script>  
  27. angular.module("myApp",["ionic"])  
  28. .controller("myCtrl",function($scope){  
  29.     $scope.items = [];  
  30.     for(var i=0;i<10;i++)   
  31.         $scope.items.push(["item list ",i+1].join(""));  
  32. });  
  33.   
  34. </script>  
Ionic基础——列表ion-list
二.ion-list ion-item 成员
   ion-item有三种预定义的按钮： 
  • ion-option-button - 选项按钮。 一个ion-item内可以包含多个选项按钮。选项按钮是隐藏的，需要用户向左 滑动成员，以显示选项按钮。可以使用ion-list的can-swipe属性允许或禁止 滑动开启选项按钮。 使用ng-click指令来挂接点击事件监听函数，其原型如下：
    [javascript] view plain copy
    1. var optionListener = function(item){...}   
    ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。 
  • ion-delete-button - 删除按钮 一个ion-item内最多有一个删除按钮。删除按钮在显示时总是位于成员的最 左端。可以使用ion-list的show-delete属性显示或隐藏删除按钮 使用ng-click指令来挂接点击事件监听函数，其原型如下：
    [javascript] view plain copy
    1. var deleteListener = function(item){...}  
    ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。 
  • ion-reorder-button - 重排按钮 一个ion-item内最多有一个重排按钮。重排按钮在显示时总是位于成员的最右端。可以使用ion-list的show-reorder属性显示或隐藏重排按钮 使用on-reorder属性来挂接重排事件监听函数，其原型如下：
    [javascript] view plain copy
    1. var reorderListener = function(item,$fromIndex,$toIndex){...}   
    ionic在捕捉到用户的重排事件时，将调用此函数，并传入当前的item对象、原序号及目标序号。
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <script src="../lib/js/ionic.bundle.min.js"></script>  
  7.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  8. </head>  
  9. <body ng-controller="myCtrl">  
  10.     <ion-header-bar class="bar-positive">  
  11.         <a class="button button-clear icon ion-ios-minus-outline" ng-click="flag.showDelete=!flag.showDelete;flag.showReorder=false;"></a>  
  12.         <h1 class="title">成员按钮</h1>  
  13.         <a class="button" ng-click="flag.showReorder=!flag.showReorder;flag.showDelete=false;">重新排序</a>  
  14.     </ion-header-bar>  
  15.     <ion-content>  
  16.         <ion-list show-delete="flag.showDelete" show-reorder="flag.showReorder">  
  17.             <ion-item ng-repeat="item in items">  
  18.                 {{item}}!  
  19.                 <ion-option-button class="button-calm">...</ion-option-button>  
  20.   
  21.                 <ion-delete-button class="ion-minus-circled" ng-click="delete_item(item)"></ion-delete-button>  
  22.                 <ion-reorder-button class="ion-navicon" on-reorder="move_item(item,$fromIndex,$toIndex)"></ion-reorder-button>  
  23.             </ion-item>  
  24.         </ion-list>  
  25.     </ion-content>  
  26. </body>  
  27. </html>  
  28.   
  29. <script>  
  30. angular.module("myApp",["ionic"])  
  31. .controller("myCtrl",function($scope){  
  32.     $scope.flag={showDelete:false,showReorder:false};  
  33.     $scope.items=["Chinese","English","German","Italian","Janapese","Sweden","Koeran","Russian","French"];  
  34.     $scope.delete_item=function(item){  
  35.         var idx = $scope.items.indexOf(item);  
  36.         $scope.items.splice(idx,1);  
  37.     };  
  38.     $scope.move_item = function(item, fromIndex, toIndex) {  
  39.   
  40.         console.log(fromIndex);  
  41.         console.log(toIndex);  
  42.   
  43.         console.log(item);  
  44.   
  45.         $scope.items.splice(fromIndex, 1);  
  46.         $scope.items.splice(toIndex, 0, item);  
  47.         console.log(item);  
  48.     };  
  49. });  
Ionic基础——列表ion-list    Ionic基础——列表ion-list  
三. collection-repeat : 高性能的ng-repeat
    collection-repeat指令和ng-repeat指令类似，但是更适用于大数据量 的列表数据，这是因为，它只将处于可视区域的数据渲染到DOM上：
[html] view plain copy
  1. <any collection-repeat="...">...</any>  
collection-repeat指令接受一个枚举表达式，同时可以附加以下的属性：
  • item-width - 可选。声明重复元素的宽度 
  • item-height - 可选。声明重复元素的高度 
  • item-render-buffer - 可选。需要载入渲染缓冲区的可视数据前后的数量。默认为3 
  • force-refresh-images - 可选。滚动时是否强制刷新图像。允许值：true | false
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <script src="../lib/js/ionic.bundle.min.js"></script>  
  7.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  8. </head>  
  9. <body  ng-controller="myCtrl">  
  10.     <ion-header-bar class="bar-positive">  
  11.         <h1 class="title">collection-repeat</h1>  
  12.     </ion-header-bar>  
  13.     <ion-content>  
  14.         <ion-list>  
  15.             <ion-item collection-repeat="item in items">  
  16.             {{item}}  
  17.             <ion-option-button class="button-positive">...</ion-option-button>  
  18.             </ion-item>  
  19.         </ion-list>  
  20.     </ion-content>  
  21.     <script type="text/javascript">  
  22. angular.module("myApp",["ionic"])  
  23. .controller("myCtrl",function($scope){  
  24.     $scope.items = [];  
  25.     for(var i=0;i<5000;i++)  
  26.         $scope.items.push(["item",i+1].join(""));  
  27. });  
  28. </script>  
  29. </body>  
  30. </html>  
Ionic基础——列表ion-list

四.脚本接口 : $ionicListDelegate
   如果需要从脚本中控制列表元素，可以使用$ionicListDelegate服务： 
  • showReorder([showReorder]) - 显示/关闭排序按钮 showReorder的允许值为：true | false。可以使用一个作用域上的表达式。
  • showDelete([showDelete]) - 显示/关闭删除按钮 showDelete的允许值为： true | false。可以使用一个作用域上的表达式。
  • canSwipeItems([canSwipeItems]) - 是否允许通过滑动方式来显示成员选项按钮 canSwipeItems的允许值为：true | false。可以使用一个作用域上的表达式 closeOptionButtons() - 关闭所有选项按钮。
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html ng-app="ezApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <script src="../lib/js/ionic.bundle.min.js"></script>  
  7.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  8. </head>  
  9. <body  ng-controller="myCtrl">  
  10.     <ion-header-bar align-title="left" class="bar-positive">  
  11.         <h1 class="title">$ionicListDelegate</h1>  
  12.         <a class="button" ng-click="close();">关闭选项</a>  
  13.     </ion-header-bar>  
  14.     <ion-content>  
  15.         <ion-list>  
  16.             <ion-item ng-repeat="item in items">  
  17.                 {{item}}!  
  18.                 <ion-option-button class="button-calm icon ion-share"></ion-option-button>  
  19.             </ion-item>  
  20.         </ion-list>  
  21.     </ion-content>  
  22. </body>  
  23. </html>  
  24.   
  25.   
  26. <script>  
  27. angular.module("ezApp",["ionic"])  
  28. .controller("myCtrl",["$scope","$ionicListDelegate",function($scope,$ionicListDelegate){  
  29.     $scope.items = ["Chinese","English","Russian","Japanese"];  
  30.     var flag = false;  
  31.     $scope.close = function(){  
  32.         $ionicListDelegate.closeOptionButtons();  
  33.     };  
  34. }]);  
  35.   
  36. </script>  
Ionic基础——列表ion-list

相关推荐