Ionic基础——列表ion-list

一.列表 : ion-list

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

 
   ... 
   ... 
   ... 

   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。
  

    
	
	
    



	
		
ion-list
	
	
		
			
			{{item}}
                
                
			
		
	

二.ion-list ion-item 成员

   ion-item有三种预定义的按钮： 

• ion-option-button - 选项按钮。 一个ion-item内可以包含多个选项按钮。选项按钮是隐藏的，需要用户向左 滑动成员，以显示选项按钮。可以使用ion-list的can-swipe属性允许或禁止 滑动开启选项按钮。 使用ng-click指令来挂接点击事件监听函数，其原型如下：

  var optionListener = function(item){...} 

  ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。 
• ion-delete-button - 删除按钮 一个ion-item内最多有一个删除按钮。删除按钮在显示时总是位于成员的最 左端。可以使用ion-list的show-delete属性显示或隐藏删除按钮 使用ng-click指令来挂接点击事件监听函数，其原型如下：

  var deleteListener = function(item){...}

  ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。 
• ion-reorder-button - 重排按钮 一个ion-item内最多有一个重排按钮。重排按钮在显示时总是位于成员的最右端。可以使用ion-list的show-reorder属性显示或隐藏重排按钮 使用on-reorder属性来挂接重排事件监听函数，其原型如下：

  var reorderListener = function(item,$fromIndex,$toIndex){...} 

  ionic在捕捉到用户的重排事件时，将调用此函数，并传入当前的item对象、原序号及目标序号。

    
	
    
    


	
		
		
成员按钮
		重新排序
	
	
		
			
				{{item}}!
				...

				
				
			
		
	




    


	
		
collection-repeat
	
	
		
			
			{{item}}
			...
			
		
	
    

四.脚本接口 : $ionicListDelegate

   如果需要从脚本中控制列表元素，可以使用$ionicListDelegate服务： 

• showReorder([showReorder]) - 显示/关闭排序按钮 showReorder的允许值为：true | false。可以使用一个作用域上的表达式。
• showDelete([showDelete]) - 显示/关闭删除按钮 showDelete的允许值为： true | false。可以使用一个作用域上的表达式。
• canSwipeItems([canSwipeItems]) - 是否允许通过滑动方式来显示成员选项按钮 canSwipeItems的允许值为：true | false。可以使用一个作用域上的表达式 closeOptionButtons() - 关闭所有选项按钮。

    
	
    
    


	
		
$ionicListDelegate
		关闭选项
	
	
		
			
				{{item}}!