角度水平滑动布局

时间:2017-08-02 11:43:13

标签: angular layout horizontal-scrolling

我正在尝试为我的网络应用创建一个特定的布局但却无法绕过它。也许你可以帮助我!

我试图设计一个包含一些不同视图的配置模块,我希望能够横向滑动"滑动"之间。 在这种情况下,滑动屏幕的感觉很重要。 我正在努力寻找一个好的布局,以及组件生命周期背后的逻辑。

Here is a doodle of what I want。 主屏幕视图具有包含当前子组件的flexbox布局。

我认为,如果容器大到足以容纳所有组件并且只是在它们之间滑动,这是不好的做法。问题在于,在没有实际目的的情况下,一次有太多的组件处于活动状态。

我正在考虑遵循这个流程的解决方案:

  • 让组件2处于活动状态
  • 向一侧滑动并捕捉事件
  • 将dom的宽度加倍并将新组件连接到其各自的一侧(左侧的组件1,右侧的组件3)
  • 以编程方式滚动以显示新组件
  • 销毁旧组件并将容器宽度调整为正常

我通常会在路由器插座的帮助下用另一个组件替换一个组件,如果我想要预先添加/附加它们,我怎么能设法实现并手动渲染组件?
使用ComponentFactoryResolver

如果父容器是flexbox(应该调整其子项的大小以适应),我如何将组件附加到dom的隐藏部分(主屏幕的右侧或左侧)中的另一个组件,也许我需要另一个容器布局?

您是否有任何提示或参考资料来帮助我解决问题?

如果你有任何想法,可能有这种布局的经验,我很高兴收到你的来信!

1 个答案:

答案 0 :(得分:0)

好的,解决方案远离我的想象。

Here is it

因此,搜索(google / stack)制定需求的重要性,而不是实现您认为可能是好的解决方案的方法。