ionic-framework - 列表项过多导致延迟

Question

我在我的应用程序中使用mat-expansion-panelfrom并将它与它结合起来，这样我就不会一次加载所有它们，也不会因此而滞后。但是，一旦我滚动到底部并加载了大约 30-40 个元素，当我打开扩展面板时它就会滞后。Angular Materialinfinite scroll

我对此的第一个解决方案是使用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 to hide default Marker: // 您可以在此之后根据需要设置此样式

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

2021 年更新：

隐藏箭头使用这个CSS：

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