分类: 技术

动态侧边导航栏 JS 实现

背景

来美丽说后做的第一个大的页面改版就是商家后台整个发宝页改版,感觉其中一个比较有意思的地方就是侧边导航栏的实现。页面内容非常多,涉及到商品的不同属性信息以及其他一些功能模块,所以整个页面的 js 实现也分模块组织。这次要记录的侧边导航就是sideNav.js这个模块。

页面效果

最终的效果如下图(如果有美丽说商家账号也可以直接访问该 链接 来看):

侧边导航栏

页面根据商品的不同属性信息划分为:在店铺的分类、款式/属性、标题/副标题/简述、货号/美丽制造货号、SKU设置、价格/库存、运费、图片信息和其他信息共8个大模块。其中图片信息模块下又分为封面图、产品介绍、商品细节、商品实拍、尺码说明、资质认证和店铺介绍工7个固定模块,以及可以动态添加或删除的自定义模块。现在侧边导航要实现的功能为:

  1. 点击侧边导航栏的不同选项,页面滚动到对应的功能区域。
  2. 根据页面当前滚动位置,高亮所在区域对应的侧边导航项;如果该项不在视野内,则滚动导航栏使该项移动至视野内。
  3. 点击添加或删除自定义模块后,能自动在导航栏中对应添加或删除对应导航项。
  4. 点击保存宝贝后,会进行信息校验;如果有错误,会在侧边导航中添加“出错信息”大项,并展示错误项,同样拥有定位功能。
  5. 点击“页面导航”或“出错信息”两个按钮会展开/折叠对应的导航面板。

代码实现

侧边导航栏的实现分为两部分:模板(HTML)和控制逻辑(JS)。

一、模板

模板的简化代码如下,主要用各标签的classid表示不同的功能项。

不同class表示的不同类型节点:

  1. floatBar:整个侧边导航模块。
  2. floatBar-title:侧边导航不同模块的 title,比如本例就包括“页面导航”和“出错信息”。
  3. floatBar-content:侧边导航一个模块中的多个导航项容器。
  4. floatBar-content-item:导航项。
  5. child-nav-container:针对“图片信息”模块包含的子模块创建的容器。
  6. floatBar-content-detail-item:“图片信息”模块下子模块导航项。

其中每个导航项都有data-cat-id属性,值同该项的class值。不同id表示的不同节点:

  1. floatBar:“页面导航”导航项容器。
  2. floatBarErr:“出错信息”导航项容器。
  3. child-nav-container:“图片信息”下导航项容器。
二、控制逻辑

代码模块组织采用类 AMD 规范,不详细介绍,本模块名为sideNav.js。模块内的一些全局变量如下:

现在针对 页面效果 部分提出的几个功能点,分别展示代码。

1. 导航定位

主要就是实现滚动效果,以及_changeActive用来改变导航项的选中样式。

2. 滚动切换

该功能实现如下:

3. 添加/删除导航项

这部分功能在自定义模块中实现,在本模块中不需要对自定义模块进行特殊处理,他们对应的导航项都是普通的导航项,只要添加在child-nav-container这个容器中即可。

4. 错误信息面板

刚进到页面时,“出错信心”这个导航模块是不展示的,只有当提交商品信息并出现校验错误,才会动态生成错误信息导航栏。

5. 导航模块切换

点击“页面导航”或“出错信息”两个导航模块的标题,可以展开/折叠对应模块,代码如下:

代码总结

以上就是主要的代码实现,最后只要将initErrorbindNavClickbindWindowScroll这三个方法作为模块接口暴露出去即可。代码没有充分考虑页面性能等因素,后续找时间再优化下。

注:转载注明出处并联系作者,本文链接:https://nodefe.com/js-dynamic-sidenav/

发表评论

评论