Ion-affix & Ion-stick 仿IOS悬浮列表插件

Ion-affix & Ion-stick 仿IOS悬浮列表插件

Ion-affix

1.相关网页

Ion-affix

2.环境准备：

执行命令

bower install ion-affix

引用js

	<script src="lib/ion-affix/ion-affix.js"></script>

3.使用

引用模块

	angular.module('app', ['ionic', 'app.controllers','ion-aff'])

UI

	<div class="list my-list">
	  	<div class="item item-divider" ion-affix data-affix-within-parent-with-class="my-list">group1</div>
		<div class="item">item1</div>
		<div class="item">item2</div>
		<div class="item3">item3</div>
	</div>

	<div class="list my-list">
	  	<div class="item item-divider" ion-affix data-affix-within-parent-with-class="my-list" >group2</div>
		<div class="item">item1</div>
		<div class="item">item2</div>
		<div class="item3">item3</div>
	</div>

	<div class="list my-list">
	  	<div class="item item-divider" ion-affix data-affix-within-parent-with-class="my-list" >group3</div>
		<div class="item">item1</div>
		<div class="item">item2</div>
		<div class="item3">item3</div>
	</div>

ion-affix 与 divider-list 实现 的 对比：

• divider-list
  
  *item 全部都在同一个list 下，
• Ion-affix
  • 每一个有item-divider的部分为独立的一个list下，
  • 通过data-affix-within-parent-with-class 来指定一个class，标志其为同一个list

Ion-stick

相关网页

Ion-stick

2.环境准备：

执行命令

bower install ion-sticky –save.

引用js

	<script src="lib/ion-sticky/ion-sticky.js"></script>

3.使用

引用模块

	angular.module('app', ['ionic', 'app.controllers','ion-sticky'])

UI

• 添加 ion-sticky
• 内层使用 divider-list
• 这里 item-divider 是在同一个一个list下

	<ion-list ion-sticky>
	  	<ion-item class="item-divider">group1</ion-item>
	  	<ion-item>item1</ion-item>
	  	<ion-item>item2</ion-item>
	  	<ion-item>item3</ion-item>

		<ion-item class="item-divider">group2</ion-item>
	  	<ion-item>item1</ion-item>
	  	<ion-item>item2</ion-item>
	  	<ion-item>item3</ion-item>

	  	<ion-item class="item-divider">group3</ion-item>
	  	<ion-item>item1</ion-item>
	  	<ion-item>item2</ion-item>
	  	<ion-item>item3</ion-item>
	</ion-list>

divider-list

	<div class="list">
	  	<div class="item item-divider">group1</div>
		<div class="item">item1</div>
		<div class="item">item2</div>
		<div class="item3">item3</div>

	  	<div class="item item-divider">group2</div>
		<div class="item">item1</div>
		<div class="item">item2</div>
		<div class="item3">item3</div>

	  	<div class="item item-divider">group3</div>
		<div class="item">item1</div>
		<div class="item">item2</div>
		<div class="item3">item3</div>
	</div>