zwq8299174 / ionic-alpha-scroll

一款基于ionic的索引列表插件,类似于原生APP的通讯录页面、微信的联系人页面、汽车之家的汽车品牌页面等等,首字母进行索引然后滑动。
MIT License
11 stars 8 forks source link
a-z alpha-scroll ionic ionic-alpha-scroll ionic3

ionic-alpha-scroll

一款基于ionic的索引列表插件,类似于原生APP的通讯录页面、微信的联系人页面、汽车之家的汽车品牌页面等等,首字母进行索引然后滑动。

一个耿直的程序猿因为业务需要,需要做一个类似原生应用联系人页面的索引列表功能。在网上找了许久许久,包括github和其他网站,虽然有类似的,但是不是闪屏就是卡顿还有抖动,都无法满足程序猿的需要,所以他决定自己写一个插件,然后就是`ionic-alpha-scroll`这个插件了。

丝般顺滑的滑动,不卡顿、不闪屏、不抖动,接近原生的滚动体验。

更新:

20171103

1、新增自定义头部模板功能。感谢@Yan Xiaodi

DEMO

DEMO 源码地址:https://github.com/zwq8299174/ionic-alpha-scroll-demo

Animated demo

安装

1、使用npm安装

npm install ionic-alpha-scroll --save

2、在app.module.ts中引入

import { AlphaScrollModule } from 'ionic-alpha-scroll';
@NgModule({
...
imports: [
...
AlphaScrollModule.forRoot(),
...
]
})

使用

1、在页面中引入

<ion-alpha-scroll *ngIf="contacts.length>0"
[listData]="contacts"
key="name"
[itemTemplate]="alphaScrollItemTemplate"
[currentPageClass]="currentPageClass">
</ion-alpha-scroll>
<ng-template
#alphaScrollItemTemplate
let-item="item"
let-currentPageClass="currentPageClass">
<ion-item (click)="currentPageClass.onItemClick(item)">
<h2>{{item?.name}}</h2>
</ion-item>
</ng-template>

2、数据格式

数据格式要求为数组类型,元素为对象或数组都可以,最好是对象格式。需要包含当前元素的首字母,本插件没有提取首字母功能。比如汽车品牌列表,单个品牌对象如下

{
    id:"1",
    initial:"A",
    logo:"http://api.jisuapi.com/car/static/images/logo/300/1.png",
    name:"奥迪",
    parentid:"0"
}

其中initial为首字母的字段。

Api

listData

列表数据,格式为Array,数组元素为对象。

key

列表元素首字母字段的名字

itemTemplate

列表元素所使用的模板,需结合页面上ng-template所使用。

currentPageClass

当前使用索引列表的页面主体class

License

This content is released under the MIT License.