[英]Use IScroll in Angular 2 / Typescript
我想使用一个称为iscroll的Javascript库。
到目前为止,我已经获得了iscroll.d.ts,现在我想使用它,但是我在打字稿上是新手,不知道该怎么做。
我的iscroll.d.ts看起来像这样:
// Generated by typings
// Source: https://raw.githubusercontent.com/types/typed-iscroll/8524f7c88e521c16462553173c9ea99e9e3d477c/iscroll.d.ts
declare module 'iscroll' {
class IScroll {
version: string;
constructor(element: string | HTMLElement, options?: IScroll.IScrollOptions);
destroy(): void;
resetPosition(time: number): boolean;
disable(): void;
enable(): void;
refresh(): void;
scrollTo(x: number, y: number, time?: number, easing?: IScroll.IScrollEaseOption): void;
scrollBy(x: number, y: number, time?: number, easing?: IScroll.IScrollEaseOption): void;
scrollToElement(el: HTMLElement | string, time?: number, offsetX?: number, offsetY?: number, easing?: IScroll.IScrollEaseOption): void;
goToPage(x: number, y: number, time?: number, easing?: IScroll.IScrollEaseOption): void;
prev(): void;
next(): void;
zoom(scale: number, x: number, y: number, time?: number): void;
refresh(): void;
destroy(): void;
utils: IScroll.IScrollUtils;
// Events
on(type: 'beforeScrollStart' |
'scrollCancel' |
'scrollStart' |
'scrollEnd' |
'flick' |
'zoomStart' |
'zoomEnd', fn: (evt?: any) => void): void;
off(type: string, fn?: (evt?: any) => void): void;
}
namespace IScroll {
export interface IScrollIndicatorOptions {
el?: HTMLElement | string;
fade?: boolean;
ignoreBoundaries?: boolean;
interactive?: boolean;
listenX?: boolean;
listenY?: boolean;
resize?: boolean;
shrink?: boolean;
speedRatioX?: number;
speedRatioY?: number;
}
export interface IScrollKeyBindings {
pageUp?: number | string,
pageDown: number | string;
end: number | string;
home: number | string;
left: number | string;
up: number | string;
right: number | string;
down: number | string;
}
export interface IScrollOptions {
indicators?: IScrollIndicatorOptions;
// Scrollbar
scrollbars?: boolean | string;
fadeScrollbars?: boolean;
interactiveScrollbars?: boolean;
resizeScrollbars?: boolean;
shrinkScrollbars?: boolean;
// Zoom
zoom?: boolean;
zoomMin?: number;
zoomMax?: number;
startZoom?: number;
wheelAction?: string;
snap?: boolean | string;
bindToWrapper?: boolean;
bounceEasing?: string | IScrollEaseOption;
bounceTime?: number;
deceleration?: number;
mouseWheelSpeed?: number;
preventDefaultException?: any;
resizePolling?: number;
probeType?: number;
keyBindings?: boolean | IScrollKeyBindings;
useTransform?: boolean;
useTransition?: boolean;
HWCompositing?: boolean;
bounce?: boolean;
click?: boolean;
disableMouse?: boolean;
disablePointer?: boolean;
disableTouch?: boolean;
eventPassthrough?: boolean;
freeScroll?: boolean;
invertWheelDirection?: boolean;
momentum?: boolean;
mouseWheel?: boolean;
preventDefault?: boolean;
tap?: boolean | string;
scrollX?: number;
scrollY?: number;
startX?: number;
startY?: number;
// Infinite options
infiniteElements: HTMLElement | 'string';
cacheSize: number;
dataset: (start: number, count: number) => Object[];
}
export interface IScrollEaseOption {
style: 'string';
fn: Function;
}
export interface IScrollEaseOptions {
quadratic: IScrollEaseOption;
circular: IScrollEaseOption;
back: IScrollEaseOption;
bounce: IScrollEaseOption;
elastic: IScrollEaseOption;
}
export interface IScrollUtils {
ease: IScrollEaseOptions;
}
}
export = IScroll;
}
我的Angular 2 page.ts看起来像这样:
import {NavController} from "ionic-angular";
import {AngularFire, AuthProviders, AuthMethods } from "angularfire2";
import {OnInit, Inject, Component} from "@angular/core";
import {UserService} from '../../../services/UserService';
import {AuthPage} from "../home/home";
import { IScroll } from "iscroll"
@Component({
templateUrl: "build/pages/auth/onboarding/onboarding.html",
providers: [UserService]
})
export class OnboardingPage {
iScroll: IScroll;
onboardingStep: number = 1;
到目前为止,导入工作正常,我想但是我不知道如何初始化和使用iscroll。
希望你们中的一些人有如何使它变为现实的提示:)
您可以像在普通的旧javascript中使用它一样使用它,不同之处在于您还可以包含类型。
例如,javascript:
let myScroll = new IScroll("#CONTAINER_ID");
打字稿:
let myScroll: IScroll = new IScroll("#CONTAINER_ID");
(注意: IScroll
不需要: IScroll
,编译器可以推断类型,但是我添加了它来说明问题)
在您的情况下:
export class OnboardingPage {
iScroll: IScroll;
constructor() {
this.iScroll = new IScroll("#CONTAINER_ID");
}
}
这段代码基于他们的文档( https://github.com/cubiq/iscroll ),但是根据您发布的.d.ts
文件,它要求使用iscroll
命名空间:
let myScroll = new iscroll.IScroll("#CONTAINER_ID");
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.