Ion-affix & Ion-stick 仿IOS悬浮列表插件
Ion-affix
1.相关网页
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
相关网页
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>