ionic-alpha-scroll

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

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

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

#更新：

$3

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

DEMO

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

!Animated demo

安装

$3

> npm install ionic-alpha-scroll --save

$3

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

使用

$3

`html
[listData]="contacts"
key="name"
[itemTemplate]="alphaScrollItemTemplate"
[currentPageClass]="currentPageClass">

#alphaScrollItemTemplate
let-item="item"
let-currentPageClass="currentPageClass">

{{item?.name}}

`

$3

数据格式要求为数组类型，元素为对象或数组都可以，最好是对象格式。需要包含当前元素的首字母，本插件没有提取首字母功能。比如汽车品牌列表，单个品牌对象如下
`javascript
{
id:"1",
initial:"A",
logo:"http://api.jisuapi.com/car/static/images/logo/300/1.png",
name:"奥迪",
parentid:"0"
}
`
其中initial为首字母的字段。

Api

$3

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

$3

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

$3

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

$3

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

License

This content is released under the MIT License.