如何解决LitElement:在重新渲染期间保持滚动位置
伙计们!
我有一个仪表板应用程序,其中包含一个或多或少长的页面。在页面的末尾,有一个显示一些数据的网格容器。在此容器内,用户可以在此容器的不同视图之间切换,然后更改 property
(_activeAlarmsListViewSet
,可以是 list
或 top
)。
视图之间的切换工作正常,正如预期的那样,我唯一遇到的是,页面在渲染过程中跳转到顶部。
我已经尝试捕捉 update()
调用并自己处理它(是的,不再跳转),但也没有更多的视图切换,因为没有重新渲染发生:
update(changedProperties) {
if (changedProperties.has('_activeAlarmsListViewSet') && changedProperties.get('_activeAlarmsListViewSet') != null) {
console.log('No re-render');
} else {
super.update(changedProperties);
}
}
是否有可能在不“跳转”到页面顶部并保持滚动位置的情况下触发重新渲染?
谢谢!
解决方法
我不认为问题出在 LitElement - 当 render
仅被调用更新已更改的部分时,DOM 的其余部分保持不变,只要内容很高,您滚动到的任何位置都会保持不变够了。
我认为问题在于您在 list 和 top 状态之间有一个重排,高度较短,以便浏览器将滚动更正到中间最大高度.
我最常在加载器和异步指令中看到这一点,因为它们在等待 Promise 时替换了 DOM。
例如:
render() {
return html`... ${until(getAndRenderData(),'loading...')}`;
}
将导致加载数据的 DOM 被替换为 loading...
每次发生任何更新,而我们只希望它发生在 getAndRenderData()
可能更改时。
有几种方法可以解决这个问题,但最简单的方法可能是使用 guard
指令:
render() {
return html`... ${guard(this._activeAlarmsListViewSet,() => until(getAndRenderData(this._activeAlarmsListViewSet),'loading...'))}`;
}
现在 guard
中的内容仅在 this._activeAlarmsListViewSet
更改时才会更改,您不必阻止 update
调用。
我发现的另一种方法是将您的 list 或 top 视图拆分为具有内部一致状态的视图 - Lit 不会重新渲染子组件,除非它们的属性发生变化(在这种情况下,他们自己处理)。然后,您可以让它们在它们之间切换时保持一致的高度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。