【问题标题】:ngx-infinite-scroll not working in mobile when is mat-sidenav layout当 mat-sidenav 布局时,ngx-infinite-scroll 在移动设备中不起作用
【发布时间】:2020-05-27 17:25:14
【问题描述】:

我正在使用 mat-sidenav 布局和路由开发 Angular 项目。当使用 ngx-infinite-scroll 显示数据库中的元素列表时。当我按照 ngx-infinite-scroll 的用户指南进行操作时。但它在桌面上运行良好。当我使用开发人员工具签入 mobileview 时,它不起作用(sidenav 消失)。我也签入了模拟器,但没用。

我也尝试过设置固定高度和 [scrollWindow]="false" 但没有用。

谁能帮忙解决一下。

感谢和问候,库马尔。

【问题讨论】:

    标签: angular


    【解决方案1】:

    StackBlitz 示例 我给你做了一个例子:https://stackblitz.com/edit/ngx-scroll-stack-001 在我看来,您的问题在于您将滚动绑定到实际窗口,因为 ngx-virtual-scroll 似乎无法正确检测滚动何时完成。

    如果您想将滚动绑定到窗口,您可能需要考虑使用自定义指令,因为它比查看元素的内部滚动状态要简单得多。

    您可以做的另一件事是在列表底部放置一个 IntersectionObserver 并附加一个回调。在这里阅读更多:https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

    原答案 您能否向我们提供您的设置示例,特别是您使用的是哪个版本的 ngx-infinite-scroll?这个问题现在太模糊了,无法回答。

    【讨论】:

    • 您好 Kralovec,感谢您的快速回复。无限滚动的版本是:"ngx-infinite-scroll":"^8.0.1",我的模板代码::
    • 这很奇怪,我设法使它与 scrollWindow 一起工作为真和假。检查我更新的答案。
    • 非常感谢 Kralovec,我也尝试了上面的示例,但它不适用于带有 mat-side-nav 容器的移动视图。非常感谢。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签