需求：导航栏宽高一定，能够容纳两行导航标签，标签宽度随着内容改变。当标签过多的时候，自动在导航栏末尾出现下拉按钮，点击后可下拉显示多余的标签。
操作dom
容器overflow设置成hidden，获取容器内的所有dom（标签）底部到容器顶部的距离、超出容器高度的dom移动到下拉按钮后的容器中。
操作数据（Angular）
- 后台读取到的导航标签存放在this.labels中
- 按照一定的标准切分this.labels数组。比如考虑每个标签名称的字数大小、内外边距距离、浮动值等。将this.labels数组中的标签对象分别放在this.labelNav和this.labelDrilldown中。
- View要做的，就是渲染出正常显示的两栏导航标签（this.labelNav)以及下拉按钮/菜单组（this.labelDrilldown）。并且可以根据this.labelDrilldown内是否有值、结合ngIf选择要不要显示下拉按钮
网友评论