https://github.com/zwq8299174/ionic-alpha-scroll

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

a-z alpha-scroll ionic ionic-alpha-scroll ionic3

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/zwq8299174/ionic-alpha-scroll
• Owner: zwq8299174
• License: mit
• Created: 2017-10-17T03:52:46.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-13T12:43:13.000Z (over 5 years ago)
• Last Synced: 2024-11-04T06:15:45.805Z (2 months ago)
• Topics: a-z, alpha-scroll, ionic, ionic-alpha-scroll, ionic3
• Language: TypeScript
• Size: 3.71 MB
• Stars: 11
• Watchers: 2
• Forks: 8
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ionic-alpha-scroll

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

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

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

#更新：

### 20171103

1、新增自定义头部模板功能。感谢[@Yan Xiaodi](https://github.com/yanxiaodi)

# DEMO

[DEMO](http://zwq8299174.github.io/ionic-alpha-scroll/)

源码地址：[https://github.com/zwq8299174/ionic-alpha-scroll-demo](https://github.com/zwq8299174/ionic-alpha-scroll-demo)

![Animated demo](https://github.com/zwq8299174/ionic-alpha-scroll/blob/master/Screenshot.gif)

# 安装

### 1、使用`npm`安装

> npm install ionic-alpha-scroll --save

### 2、在`app.module.ts`中引入

```typescript

import { AlphaScrollModule } from 'ionic-alpha-scroll';

 @NgModule({

	 ...

	 imports: [

		...

		AlphaScrollModule.forRoot(),

		...

	]

})

```

# 使用

### 1、在页面中引入

```html

0"

	[listData]="contacts"

	key="name"

	[itemTemplate]="alphaScrollItemTemplate"

	[currentPageClass]="currentPageClass">

	

		
{{item?.name}}

	


```

### 2、数据格式

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

```javascript

{

	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](https://opensource.org/licenses/MIT) License.