标签: virtualscroll

我在将虚拟滚动实现到我的 ionic 4 + Angular 项目中时遇到问题。

以前，我使用过 ionic 的虚拟滚动实现（ion-virtual-scroll），它最初工作得很好，但遇到了一个可以说是很大的警告，它不支持 ionic 的网格视图，这是我的应用程序所需的东西。（Ionic 已在其存储库中的“功能请求”下承认了这一点： https: //github.com/ionic-team/ionic/issues/16632）

与此同时，我求助于使用 ngx-virtual-scroller （https://github.com/rintoj/ngx-virtual-scroller），因为它提供了多列支持

但是，我在项目中使用时遇到了问题。

我已经通过 npm 安装了它（npm install ngx-virtual-scroller --save）并在我的 app.module 中导入了 VirtualScrollerMoudle

应用程序模块.ts

import { VirtualScrollerModule } from 'ngx-virtual-scroller'

imports: [
    ...
    VirtualScrollerModule
],

我已将虚拟滚动标签包裹在组件视图中的元素周围

产品卡视图.component.html

<virtual-scroller #scroll [items]="productsArray">
  <div *ngIf="columnViewActive; else listView">
    <ion-row>
      <ion-col size="6" *ngFor="let p of scroll.viewPortItems">
        <ion-card>
          <ion-card-header>
            <a class="productTitleColumn" title="{{ p.title }}" href="{{ p.link }}">{{ p.title }}</a>
          </ion-card-header>
          <ion-card-content>
            ..... ETC .....
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </div> …

到目前为止，我之前构建无限滚动器的所有尝试都失败了。我目前正在处理的组件使用 Angular 的虚拟滚动，并且应该在达到虚拟滚动视口的某个索引时更新数据源。虽然 BehaviorSubject 确实得到了更新，但我在视图中看不到新版本。

我的组件如下所示：

import {Day, Month, Selected, Weekday} from './datepicker';
import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
import {BehaviorSubject} from 'rxjs';

@Component({
  selector: 'app-calendar-datepicker',
  templateUrl: './calendar-datepicker.component.html',
  styleUrls: ['./calendar-datepicker.component.scss']
})
export class CalendarDatepickerComponent implements OnInit {
  months: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);

  previousScrollIndex: number;

  @ViewChild('dateScroller') dateScroller: CdkVirtualScrollViewport;

  constructor() {
  }

  ngOnInit() {
    /*initialization of the array*/
    const initialMonths = [];
    const month = new Month(this.currentDate);
    const date = moment(this.currentDate);
    const nextMonth = new Month(date.add(1, 'M'));
    const nextDate = moment(date);
    const monthAfterNextMonth = …

在我的Angular应用程序中，我使用的是来自 Angular cdk的Virtual Scroll。

这是我的组件模板：

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

在我的 Component 类中，我有一个方法可以更改数组items并为其提供新内容。每次调用此方法时，数组的大小都可以更改：

reload(newItems) {
  this.items = newItems;
}

调用该方法后reload，项目数组将正确更新，并且视图会反映此更改。但是，滚动不会回到顶部。

我希望每次items更改数组时都使用虚拟滚动来重置顶部的滚动。

是否有任何可用的事件，cdk-virtual-scroll-viewport 来查找列表中的元素是否呈现。例如，在滚动浏览下面的列表时，是否有一种方法可以识别特定的 li 是否呈现或一组新元素呈现到 DOM 中。

• 物品
• 物品
• 物品

我试图通过虚拟滚动组件加载 20 个项目，但我在页面加载后立即看到 34 个项目，根本不进行任何滚动。我弄错了 css 吗？或者我忘记了控件上的某些设置？该项目位于此处。