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>
上一篇:反编译获取线上任何微信小程序源码(转)


下一篇:复用微信小程序源码包后仍然有原小程序的版本管理怎么处理