在 Angular 2 / Typescript 中使用 IScroll
Posted
技术标签:
【中文标题】在 Angular 2 / Typescript 中使用 IScroll【英文标题】:Use IScroll in Angular 2 / Typescript 【发布时间】:2016-11-27 19:41:57 【问题描述】:我想使用一个名为 iscroll 的 javascript 库。
到目前为止,我得到了 iscroll.d.ts,现在我想使用它,但我是 typescript 的新手,不知道该怎么做。
我的 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。
希望你们中的一些人有任何提示如何将其变为现实:)
【问题讨论】:
嗨,我也在尝试使用这个库,但是离你很近。我无法事件导入 ..my issue here。你是如何导入的,你使用了哪些 npm 包(*也许你有一个不同的版本)> 【参考方案1】:您可以像在普通的旧 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");
希望这会有所帮助。
【讨论】:
以上是关于在 Angular 2 / Typescript 中使用 IScroll的主要内容,如果未能解决你的问题,请参考以下文章
在 Angular 2 / Typescript 中使用 IScroll
如何在 Angular 2 的 TypeScript 中映射嵌套的 Json
在 Angular 2 + TypeScript 中深度复制数组
使用 Typescript 在 Angular 2 中的组件之间共享行为