MVVM思维转换:从操作dom到操作数据

需求:导航栏宽高一定,能够容纳两行导航标签,标签宽度随着内容改变。当标签过多的时候,自动在导航栏末尾出现下拉按钮,点击后可下拉显示多余的标签。

操作dom

容器overflow设置成hidden,获取容器内的所有dom(标签)底部到容器顶部的距离、超出容器高度的dom移动到下拉按钮后的容器中。

操作数据(Angular)
  • 后台读取到的导航标签存放在this.labels中
  • 按照一定的标准切分this.labels数组。比如考虑每个标签名称的字数大小、内外边距距离、浮动值等。将this.labels数组中的标签对象分别放在this.labelNav和this.labelDrilldown中。
  • View要做的,就是渲染出正常显示的两栏导航标签(this.labelNav)以及下拉按钮/菜单组(this.labelDrilldown)。并且可以根据this.labelDrilldown内是否有值、结合ngIf选择要不要显示下拉按钮
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一年的变化 不仅仅是学姐的称呼 老师的称号 谈吐姿态一一不可缺少 他们认可我的进步 我也肯定自己的进步 但是在未来...
    over璞石阅读 1,468评论 0 0
  • こんにちは,蜗牛君我来了。最近在学习浊音、拗音、拨音、促音、长音,涉及的难点、要点略多,头有点晕乎乎的。在眼耳手脑...
    小蜗牛物语阅读 4,145评论 6 39
  • 我长出了翅膀大地退去风退去声音退去我回到了母体黑暗里我寻找曾经的混沌
    静铃音阅读 5,561评论 24 77

友情链接更多精彩内容