在 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 中的组件之间共享行为

带有 TypeScript 的 Angular 2 [关闭]

Angular 2 中的 const 和 Typescript