需求:
有如下蓝色的UI界面,操作区是用于承载不同类型操作的功能。
在上面的操作按钮,那么操作区域就显示不同的操作界面。
1、请问这样的功能应该如何设计呢?
是否是通常的做法先把3个操作的对应的UI组件设计好,然后点击按钮的时候,进行加载对应的组件?
2、还是说有其他的更好的方式做到呢?
需求:
有如下蓝色的UI界面,操作区是用于承载不同类型操作的功能。
在上面的操作按钮,那么操作区域就显示不同的操作界面。
1、请问这样的功能应该如何设计呢?
是否是通常的做法先把3个操作的对应的UI组件设计好,然后点击按钮的时候,进行加载对应的组件?
2、还是说有其他的更好的方式做到呢?
8 回答5.2k 阅读✓ 已解决
6 回答4.1k 阅读✓ 已解决
9 回答7.9k 阅读
6 回答2.8k 阅读
3 回答9.1k 阅读✓ 已解决
5 回答6.8k 阅读✓ 已解决
2 回答8.8k 阅读✓ 已解决
这种情况你其实可以对标常见框架的
Tab
组件的设计;至于是否是点击时加载对应的组件,个人认为还是取决于业务;
1.在绝大多数情况下,为了代码的结构清晰,便于维护,逻辑分离等,设计时各组件分离,组件内各自处理逻辑,用户主动触发点击才去渲染组件,当然这个过程中需要考虑切换时的数据加载过程,比如要加
loading
等;这种方式弊端可能在于需要父子组件的数据传递,父组件获取子组件的数据状态
等场景就麻烦了点;2.另外一种方式:把
组件1
、组件2
等都写在一起,状态
可以共用了,但降低了代码的可维护性,而且一堆逻辑,会越补越多;3.基于第一种的方式,如果
组件1
、组件2
的UI相似,比如都是表格,那完全可以做一个表格的公共组件,用不同的数据配置来渲染,也就是点击按钮的时候,切换不同的表格配置,从而渲染;比如下面的表头的配置():