列表项太多导致延迟

Question

我在我的应用程序中使用 Angular Material 中的 mat-expansion-panel，并将其与 infinite scroll 结合使用，这样我就不会一次加载所有这些，也不会延迟因为这些。但是，一旦我滚动到底部并且加载了大约 30-40 个元素，当我打开扩展面板时它就会滞后。

我的第一个解决方案是使用 virtual-scroll。

https://ionicframework.com/docs/api/virtual-scroll#usage

但它不支持可变高度项目。

我的下一个解决方案是在两个方向上使用 infinite-scroll，但我从未见过其他应用程序使用它，所以我认为应该有更好的方法。

https://ionicframework.com/docs/api/infinite-scroll#usage

有没有其他人遇到过这个问题并以更好的方式解决了它？

Answer 1

您可以使用 HTML 详细信息摘要标签：

Html:

<details>
  <summary>Your Heading</summary>
  <p> Your First Paragraph.</p>
  <p> Your Second Paragraph.</p>
</details>

CSS 隐藏默认标记：//您可以在此之后根据需要设置样式

summary::-webkit-details-marker { display: none }

UPDATE for 2021:

隐藏箭头使用这个css:

details > summary {
  list-style: none;
}
details > summary::marker {
  display: none;
}

列表项太多导致延迟

Too many list items cause lag

ionic-framework

ionic4

ionic-native

virtualscroll