宽度自适应且能拐弯的时间轴效果如下:
背景
大多数的水平时间轴,一行放不下的情况下,会出现滚动条。不在屏幕内的时间点只能通过拖动滚动条的方式来查看。这种实现方式,无法满足用户一眼就能看到所有时间点的需求。
改善思路
一行展示不下的时间轴,拐个弯拐到下一行继续展示,并且监听屏幕宽度的变化,自适应每一行能展示多少个时间点。
实现手段
借助ngx-tethys组件库的水平时间轴(官方示例如下),通过自己调整样式、动态计算并添加拐线。
具体实现
整个时间轴分为 左、中、右 三个部分。中间时间轴区域定宽且宽度只能是单个时间点宽度的n倍,左、右两侧拐弯线容器的宽度均分剩余宽度且最小宽度定为50。
效果图
宽屏幕时:
缩小屏幕后:
继续缩小屏幕:
再缩小屏幕:
具体实现代码
由于最近比较忙,我还没有去整理(美化)我的实现源码,想要自己试试的小伙伴可以先将就一下,看看我简陋的实现“原理图”,后面有空我会将源码分享给大家。