如何在ionic中高效加载大列表

Question

我正试图在离子应用程序中加载一个大的元素列表(~630个元素(。我对优化最初加载页面所需的时间特别感兴趣。

我尝试过使用虚拟滚动，因为它只按需加载元素。这很好，因为我的页面加载很快，并且在页面呈现之前加载所有630个元素没有延迟。相反，只渲染视口中的项目，从而产生平滑的用户体验。

我的问题是：

我使用搜索栏来筛选列表，并且我的实现要求在DOM中加载所有项以正确地进行筛选。通过使用虚拟滚动，我的过滤器无法正常工作，因为项目除非在视口中，否则不会插入到DOM中。

我希望能够有一个快速加载的页面，但也可以过滤。有没有一种虚拟滚动的替代方案可以让我在最初更快地加载页面？或者我应该更改我的过滤器实现吗？

这是我的代码：

home.html

<ion-searchbar (ionInput)="onSearch($event)" class="hymns-searchbar" placeholder="Search"  [showCancelButton]="shouldShowCancel"  (ionCancel)="onClear()"></ion-searchbar>
...
<ion-content padding>
<ion-list [virtualScroll]="hymns">
<div *virtualItem="let song; let i = index;"
id="songItems" approxItemHeight="62px" bufferRatio="10">
<button ion-item clear class="hymns-list-item"
[navPush]="songPage" [navParams]=song>
<h4 class="song-title">
<span class="song-number">{{i + 1}}</span>{{ song.title }}
</h4>
<small class="song-genre">{{song.category}}</small>
</button> 
</div>
</ion-list>
</ion-content>

主页.ts

public hymns: any;
private songItems:any;
ngOnInit() {
this.hymns = songs; // Array with 630 elements
}
onSearch(event) {
let val = event.target.value;
if (typeof val == 'undefined') {
// clear list
}
else {
val = val.toUpperCase();
this.songItems = document.querySelectorAll('#songItems');
for (let i = 0; i < this.hymns.length; i++) {
let title = this.hymns[i].title;
if (title.toUpperCase().indexOf(val) > -1) {
this.songItems[i].style.display = '';
}
else {
this.songItems[i].style.display = 'none';
}
}
}

Answer 1

虚拟滚动是一种很好的优化机制。你应该离开它。

最好不要直接与DOM交互。Angular为您提供了一个很好的DOM抽象。您可以尝试通过使用一个单独的数组来显示筛选后的值来优化搜索。

template

<ion-searchbar (ionInput)="onSearch($event)"></ion-searchbar>
<ion-list [virtualScroll]="displaySongs">
<ion-item *virtualItem="let item">
{{ item }}
</ion-item>
</ion-list>

ts

public displaySongs: [];
private allSongs: [];
ngOnInit() {
this.allSongs = songs; // Array with 630 elements
this.displaySongs = songs;
}
onSearch(event) {
const searchQuery = event.target.value.toUpperCase();
this.displaySongs = this.allSongs
.filter((song) => song.toUpperCase().includes(searchQuery));
}