脑图、流程图、树形图涉及大量数据时在手机端显示问题解决
脑图、流程图、树形图涉及大量数据时在手机端显示问题解决
·
要解决的问题:
脑图、流程图、树形图涉及大量数据时在手机端显示问题解决
具体问题点:
最近有了个任务,将个人的祖宗九代梳理一下,但并不是简单的网上的祖辈九代,而是要把母系也加进去,不止是母亲的父亲,母亲的母亲也要,再深入就是母亲的母亲的母亲。大致如图:
这样下来统计的九代共1022个元素。
目标:将大量数据在手机端展示+清晰展示他们之间的关系
废弃思路:
1、用手机文件目录格式,面包屑一层一层展示
废弃原因:无法展示出脑图、流程图、树形图这类数据上下级之间的关系
2、将这些用图片形式,利用scroll-view可以随意拖动展示
废弃原因:数据量大的时候,用户拖着拖着就飘了,思路不但不清晰,还更乱了
最终解决方案:
利用二分法原理,可让用户从大量数据中最快找到需要的
1、先在父亲、母亲中二选一,这样就直接排除一半数据
2、利用二分法,当一层选择爷爷,则二层对应的便是爷爷的父亲、母亲;当一层选择的是奶 奶,则二层对应的便是奶奶的父亲、母亲;三层根据二层选择进行对应的父辈、母辈名称 展示,依此类推
这样既保留了清晰的逻辑(因为是用户一步一步走出来的),又将大量数据在手机这种小屏幕上展示完毕。
更多推荐




所有评论(0)