angular2--实现类似大众点评的左右分类栏目效果

最新推荐文章于 2022-05-12 20:25:09 发布

原创

最新推荐文章于 2022-05-12 20:25:09 发布 · 632 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular2 #scrollFn #大众点评 #左右栏菜单

本文介绍如何使用 Angular2 框架，实现类似大众点评的左右分类栏目效果。主要内容包括：1) 左侧为侧栏导航，右侧显示对应分类的子菜单列表；2) 点击左侧菜单或右侧子菜单滚动时，两侧同步定位到相应位置。通过 HTML 页面布局、TypeScript 逻辑控制和 CSS 样式实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、主要实现效果如下显示

1、左边为侧栏导航，右边为对应左边分类的子菜单列表。
2、左边菜单点击时，右边的对应的子菜单就会滚到页面的顶部；同理，右边的子菜单滚动时，左边的侧栏导航也会去到对应的分类处。

二、页面实现 html

<div class="content" #content (scroll)="scrollFn($event)">
	<!--左边导航栏 S-->
	<div class="r-nav-left">
		<ul>
			<li *ngFor="let item of classLists" [ngClass]="{
    
    'active':index==item.nameIndex}" (click)="positionIndex(item.nameIndex)">{
  
  {item.nameIndex}}</li>
		</ul>
	</div>
	<!--左边导航栏 E-->

	<!--右边分类内容 S-->
	<div class="r-nav-right">
		<div class="r-nav-item" *ngFor="let item of classLists"  >
			<p class="r-nav-tit" [id]="'nav-'+item.nameIndex">{
  
  {item.nameIndex}}</p>
			<div class