我想使用名为iscroll的Javascript Libary。
到目前为止,我得到了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。
希望你们中的一些人有任何提示如何将其付诸实践:)
答案 0 :(得分:4)
你使用它就像你在普通的旧javascript中使用它一样,区别在于你也可以包含类型。
例如,javascript:
let myScroll = new IScroll("#CONTAINER_ID");
打字稿:
let myScroll: IScroll = new IScroll("#CONTAINER_ID");
(请注意,不需要: 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");
希望这有帮助。