Skip to content

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

License

Notifications You must be signed in to change notification settings

zwq8299174/ionic-alpha-scroll

Repository files navigation

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.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published