Question

从previous post开始，我已经iScroll至少要加载到我的Ionic应用程序中。我这样做是因为我希望在Windows桌面环境中运行时在应用程序上进行轻拂滚动，在该环境中，您只能获得Windows标准滚动，而与在移动设备上进行本地轻拂（动量）滚动相反

为了进行测试，我只是使用了一种旧的方式来链接脚本，然后找到挂在窗口对象上的IScroll（因为导入npm包无法使它工作）。

因此我将iscroll.js文件复制到assets，并将链接添加到index.html。

<script type="text/javascript" src="assets/iscroll.js"></script>

不太理想，但至少可以让我对其进行测试，以查看它是否对我有用。

然后我有以下测试代码。

    import { Component, ViewChild, ElementRef } from '@angular/core';

    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
       public items: Array<string>;
       @ViewChild('wrapper') wrapper : ElementRef;

       constructor() {
          this.items = new Array<string>();
          for(let i = 1; i < 100; i++)
             this.items.push(`Item ${i}`) ;
      }

      public ngAfterViewInit() {
        try {
          let w = window as any;
          var myScroll = new w.IScroll(this.wrapper.nativeElement, {
            mouseWheel: true,
            scrollbars: true
        });
        } catch (error) {
          console.log(error);
        }
      }
    }

标记为

   <ion-header>
      <ion-toolbar>
        <ion-title>
          Ionic Blank
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <!-- <ion-content scroll-y=false> -->
      <div #wrapper>
      <ul>
        <li *ngFor= 'let item of items'>
          {{item}}
        </li>
    </ul>
    </div>
    <!-- </ion-content> -->

我已经调试了IScroll构造函数，可以看到它成功获取了div并对其应用了各种样式。

但是，我只是没有任何滚动。我已禁用内容上的离子滚动功能，甚至删除了内容控件，但仍然无法正常工作。

我有以下离子环境。

    Ionic:

       ionic (Ionic CLI)             : 4.6.0 (C:\Users\peter\AppData\Roaming\npm\node_modules\ionic)
       Ionic Framework               : @ionic/angular 4.0.0-rc.0
       @angular-devkit/build-angular : 0.11.4
       @angular-devkit/schematics    : 7.1.4
       @angular/cli                  : 7.1.4
       @ionic/angular-toolkit        : 1.2.2

    System:

       NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)
       npm    : 6.1.0
       OS     : Windows 10

是否有其他人尝试过此操作，或者有任何想法为什么不能在Ionic应用程序中使用它？

提前感谢您提供任何信息。

如何使iScroll在Ionic / Angular应用程序中工作

0 个答案: