Use IScroll in Angular 2 / Typescript(在 Angular 2/Typescript 中使用 IScroll)
问题描述
我想使用一个名为 iscroll 的 Javascript 库.
i want to use a Javascript Libary called iscroll.
到目前为止,我得到了 iscroll.d.ts,现在我想使用它,但我是 typescript 的新手,不知道该怎么做.
So far i got the iscroll.d.ts and now i want to use it, but iam new at typescript and dont know how to do that.
我的 iscroll.d.ts 看起来像这样:
My iscroll.d.ts looks like this:
// 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 看起来像这样:
And my Angular 2 page.ts looks like this:
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.
The Import works fine so far, i think but i dont know how to init and use iscroll.
希望你们中的一些人有任何提示如何将其变为现实:)
Hope some of you got any tips how to bring that to life :)
推荐答案
您可以像在普通的旧 javascript 中使用它一样使用它,不同之处在于您还可以包含类型.
You use it just like you'd use it in plain old javascript, with the difference that you can also include types.
例如,javascript:
For example, javascript:
let myScroll = new IScroll("#CONTAINER_ID");
打字稿:
let myScroll: IScroll = new IScroll("#CONTAINER_ID");
(注意 :IScroll
不是必需的,编译器可以推断类型,但我添加它是为了说明一点)
(notice that the : IScroll
isn't needed, the compiler can infer the type, but I added it to make a point)
在你的情况下:
export class OnboardingPage {
iScroll: IScroll;
constructor() {
this.iScroll = new IScroll("#CONTAINER_ID");
}
}
此代码基于他们的文档(https://github.com/cubiq/iscroll)但根据您发布的 .d.ts
文件,它需要使用 iscroll
命名空间:
This code is based on their documentation (https://github.com/cubiq/iscroll) but according to the .d.ts
file you posted it requires to use the iscroll
namespace:
let myScroll = new iscroll.IScroll("#CONTAINER_ID");
希望这会有所帮助.
这篇关于在 Angular 2/Typescript 中使用 IScroll的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:在 Angular 2/Typescript 中使用 IScroll
基础教程推荐
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 直接将值设置为滑块 2022-01-01