角度 – 可收缩的垫子工具栏
我使用此处提供的示例来设置响应式导航栏
https://theinfogrid.com/tech/developers/angular/responsive-navbar-angular-flex-layout/ 我的代码看起来非常相似 <div style="height: 85vh;"> <mat-toolbar color="primary" mat-scroll-shrink> <span>{{title}}</span> <span class="example-spacer"></span> <div fxShow="true" fxHide.lt-md="true"> <!-- The following menu items will be hidden on both SM and XS screen sizes --> <a href="#" mat-button>Home</a> <a href="#" mat-button>About</a> <a href="#" mat-button>Services</a> <a href="#" mat-button>Portfolio</a> <a href="#" mat-button>Start</a> <a href="#" mat-button>FAQ</a> <a href="#" mat-button>Blog</a> <a href="#" mat-button>Contact</a> </div> <div fxShow="true" fxHide.gt-sm="true"> <a href="#" (click)="sidenav.open()">Show Side Menu</a> </div> </mat-toolbar> <mat-sidenav-container fxFlexFill class="example-container"> <mat-sidenav #sidenav fxLayout="column"> <div fxLayout="column"> <a (click)="sidenav.close()" href="#" mat-button>Close</a> <a href="#" mat-button>Home</a> <a href="#" mat-button>About</a> <a href="#" mat-button>Services</a> <a href="#" mat-button>Portfolio</a> <a href="#" mat-button>Start</a> <a href="#" mat-button>FAQ</a> <a href="#" mat-button>Blog</a> <a href="#" mat-button>Contact</a> </div> </mat-sidenav> <mat-sidenav-content fxFlexFill> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> <p>Demoing some content to make this thing scroll</p> </mat-sidenav-content> </mat-sidenav-container> </div> 我想要发生的是当我向下滚动时,mat-toolbar会缩小,这在很多站点都很常见,比如这个: https://www.havealook.com.au/ 我不会发布其余的角度5代码,只需按照示例重新创建 – 它非常快. 我在这里查看了材料网站 https://material.angular.io/components/toolbar/overview 但是关于如何添加它没有太多解释,我对这些东西很新.有没有人知道如何自定义这个以使工具栏缩小,基于滚动? 解决方法
2018年11月更新
ScularDispatchModule已弃用Angular CDK v7.请改用ScrollingModule. 我创建了一个带有工具栏的Stackblitz,当向下滚动时会收缩. 主要步骤 使用CdkScrollDispatcher服务来响应滚动事件 >在模块中导入ScrollDispatchModule. import {ScrollDispatchModule} from '@angular/cdk/scrolling'; >标记滚动事件与指令cdkScrollable相关的容器,这里是mat-sidenav-content. <mat-sidenav-content fxFlexFill cdkScrollable> > React以滚动组件的ngOnInit中的事件,获取scrollTop位置并设置一个标志,如果它大于某个阈值: private readonly SHRINK_TOP_SCROLL_POSITION = 50; shrinkToolbar = false; constructor(private scrollDispatcher: ScrollDispatcher,private ngZone: NgZone) { } ngOnInit() { this.scrollDispatcher.scrolled() .pipe( map((event: CdkScrollable) => event.getElementRef().nativeElement.scrollTop) ) .subscribe(scrollTop => this.ngZone.run(() => this.shrinkToolbar = scrollTop > this.SHRINK_TOP_SCROLL_POSITION ? true : false)); } 您需要使用ngZone运行它,因为默认情况下ScrollDispatcher的scrolled()事件在Angular之外运行.没有它,ChangeDetection将无法运行,您的模板也不会更新. 滚动时更改工具栏布局 >向下滚动容器时,添加一个缩小css类 <mat-toolbar color="primary" [ngClass]="{'shrink-toolbar': shrinkToolbar}"> >为缩小布局定义css类. .shrink-toolbar { height: 32px; } 在official docs中查找有关滚动服务的更多信息. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |