首頁猿問當頁面標題在側導航內容中不可見時，...

當頁面標題在側導航內容中不可見時，在工具欄中顯示文本

JavaScript

白衣染霜花 2022-09-16 20:58:14

我正在做一個有角度的項目（我還在學習，還是個新手）。我想知道當用戶向下滾動側導航頁面內容時，當工具欄與文本重疊時，如何在工具欄中設置標題（驅動程序名稱和信息）（詹姆斯史密斯 - PLACA：ABC1234）。我分叉了一個樣板旁導航代碼與您分享 https://stackblitz.com/edit/angular-closing-side-nav-in-mobile-z35xfw?file=app/sidenav-responsive-example.html這就是我想實現的目標。

查看完整描述

1 回答

搖曳的薔薇

TA貢獻1793條經驗獲得超6個贊

我做了這個功能，你可以在stackblitz中看到它，基本上，我做了一個對標題的引用（檢查HTML中的第39行），檢查這個標題是否可見的邏輯是：

this.titleIsVisible =

bounding.top >= 0 &&

bounding.left >= 0 &&

bounding.right <=

(window.innerWidth || document.documentElement.clientWidth) &&

bounding.bottom <=

(window.innerHeight || document.documentElement.clientHeight);

為了偵聽我在 TS 和我剛剛使用的 HTML 中使用的滾動事件（滾動）。要查看此內容，請檢查 TS 中的第 28 行和 HTML 中的第 30 行。@HostListener("window:scroll", ["$event"])

以防萬一，這是代碼。

import { Component, ViewChild, ElementRef, HostListener } from "@angular/core";

import {

BreakpointObserver,

Breakpoints,

BreakpointState

} from "@angular/cdk/layout";

import { FormControl } from "@angular/forms";

import { Observable } from "rxjs";

import { map } from "rxjs/operators";

/** @title Responsive sidenav */

@Component({

selector: "sidenav-responsive-example",

templateUrl: "sidenav-responsive-example.html",

styleUrls: ["sidenav-responsive-example.css"]

})

export class SidenavResponsiveExample {

@ViewChild("drawer") drawer: any;

@ViewChild("title") title: ElementRef;

public selectedItem: string = "";

public isHandset$: Observable<boolean> = this.breakpointObserver

.observe(Breakpoints.Handset)

.pipe(map((result: BreakpointState) => result.matches));

public titleIsVisible: boolean = true;

constructor(private breakpointObserver: BreakpointObserver) {}

@HostListener("window:scroll", ["$event"])

onScroll() {

const bounding = this.title.nativeElement.getBoundingClientRect();

this.titleIsVisible =

bounding.top >= 0 &&

bounding.left >= 0 &&

bounding.right <=

(window.innerWidth || document.documentElement.clientWidth) &&

bounding.bottom <=

(window.innerHeight || document.documentElement.clientHeight);

}

closeSideNav() {

if (this.drawer._mode == "over") {

this.drawer.close();

}

<mat-sidenav-container class="sidenav-container">

<mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"

[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">

<mat-toolbar color="primary" style="margin-top:30px;"> Business</mat-toolbar>

<mat-nav-list >

<mat-list-item (click)="closeSideNav()">

<mat-icon matListIcon>home</mat-icon>

</mat-list-item>

<mat-list-item (click)="closeSideNav()">

<mat-icon matListIcon>person</mat-icon>

<a matLine>Customers</a>

</mat-list-item>

<mat-list-item (click)="closeSideNav()">

<mat-icon matListIcon>group_work</mat-icon>

<a matLine>employees</a>

</mat-list-item>

<mat-list-item (click)="closeSideNav()">

<mat-icon matListIcon>business</mat-icon>

<a matLine>business</a>

</mat-list-item>

</mat-nav-list>

</mat-sidenav>

<mat-sidenav-content (scroll)="onScroll($event)">

<mat-toolbar color="primary">

<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>

</button>

<h1 *ngIf=!titleIsVisible>TITLE</h1>

</mat-toolbar>

<h1 #title >TITLE</h1>

<div >

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

</div>

<ng-content>

</ng-content>

</div>

</mat-sidenav-content>

</mat-sidenav-container>

反對回復 2022-09-16

1 回答
0 關注
132 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

當頁面標題在側導航內容中不可見時，在工具欄中顯示文本

當頁面標題在側導航內容中不可見時，在工具欄中顯示文本

1 回答

添加回答

當頁面標題在側導航內容中不可見時，在工具欄中顯示文本