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>

转载于:https://www.cnblogs.com/final-elysion/p/6097222.html