[案文解决办法] 我的目标是,在没有控制的情况下,使配制成像,但在点击部分可见的垫子时,能够自动输入,将其移至可见的加拿大观察所。
1) This behavior already partially realized in this example "from the box" - https://stackblitz.com/edit/angular-mat-tabs-scrollalble-initial-behavior.
The problem is that you can t scroll backward normally - there some buggy behavior to push tabs to the left. So it does not work as I wanted.
2) 下一个变量是滚动活动——在表层组上采用<条码>(wheel)=“event”,但该表还未使用移动电话:。 https://stackoverflow.com/a/51545130/9026103"。
3) 在你点击标语时,我自己在移动和自动滚动上把点击的刺刀加到屏幕浏览中心,但这样做并不简单。
首先,在打上表象和图象时,你需要区分“盒子”的滚动:
mat-tabs-overe.scs:
$black: #121212;
@mixin media-query-for-mobile {
@media (max-width: 768px) and (min-width: 1px) {
@content;
}
}
mat-tab-group {
.mat-tab-header {
.mat-tab-header-pagination {
display: none !important; // <== disable pagination
}
.mat-tab-label-container {
left: 0px; // if you need to use it on mobile - set left position to 0
width: 100%;
.mat-tab-list {
overflow-x: auto !important; // <== set horisontal scroll bar imperatively
// below rule prevents sliding of buttons container - because it not sliding properly - to left it not slide as well
transform: none !important;
.mat-tab-labels {
// some tweaks for tabs - up to you
@include media-query-for-mobile {
justify-content: unset !important;
}
.mat-tab-label {
// min-width: 20% !important;
padding: 1.25% !important;
margin: 0px !important;
text-transform: uppercase;
color: $black;
font-weight: 600;
min-width: 140px !important;
}
}
}
}
}
}
in this case you will see that all tabs are similar by width and scrollable on mobile.
其次,在你点击时,你需要自动制成表格,并根据目前的观察结果,将其位置改为屏幕中心——请这样做!
我们可以制定指令,听取以下主要集装箱:<代码><mat-tabs-group>,可滚动集装箱的检查宽度。 a. 所需集装箱:
模板中的指令:
<mat-tab-group scrollToCenter>
<mat-tab label="tab 1"></mat-tab>
<mat-tab label="tab 2"></mat-tab>
<mat-tab label="tab 3"></mat-tab>
<mat-tab label="tab 4"></mat-tab>
<mat-tab label="tab 5"></mat-tab>
<mat-tab label="tab 6"></mat-tab>
<mat-tab label="tab 7"></mat-tab>
<mat-tab label="tab 8"></mat-tab>
</mat-tab-group>
指令:
import { Directive, ElementRef, OnDestroy } from @angular/core ;
import { fromEvent, Subscription } from rxjs ;
interface DOMRectI {
bottom: number;
height: number;
left: number; // position start of element
right: number; // position end of element
top: number;
width: number; // width of element
x?: number;
y?: number;
}
@Directive({
// tslint:disable-next-line:directive-selector
selector: [scrollToCenter] ,
})
export class MatTabScrollToCenterDirective implements OnDestroy {
isMobile: boolean;
subs = new Subscription();
constructor(
private element: ElementRef
) {
this.subs.add(
fromEvent(this.element.nativeElement, click ).subscribe((clickedContainer: MouseEvent) => {
const scrollContainer = this.element.nativeElement.querySelector( .mat-tab-list );
const currentScrolledContainerPosition: number = scrollContainer.scrollLeft;
const newPositionScrollTo = this.calcScrollToCenterValue(clickedContainer, currentScrolledContainerPosition);
})
);
}
/** calculate scroll position to center of viewport */
calcScrollToCenterValue(clickedContainer, currentScrolledContainerPosition): number {
const scrolledButton: DOMRectI = (clickedContainer.target as HTMLElement).getBoundingClientRect();
const leftXOffset = (window.innerWidth - scrolledButton.width) / 2;
const currentVisibleViewportLeft = scrolledButton.left;
const neededLeftOffset = currentVisibleViewportLeft - leftXOffset;
console.log(scrolledButton);
const newValueToSCroll = currentScrolledContainerPosition + neededLeftOffset;
return newValueToSCroll;
}
ngOnDestroy() {
this.subs.unsubscribe();
}
}
And it works! :0 But not in ios and IE...
Why? Because ios and IE don t support Element.scroll()
Solution - npm i element-scroll-polyfill
and set to polyfills.ts
/** enable polufill for element.scroll() on IE and ios */
import element-scroll-polyfill ;
Great! IE 和 ios不支持顺利发展。
Solution - npm i smoothscroll-polyfill
and add to polyfills.ts
import smoothscroll from smoothscroll-polyfill ;
// enable polyfill
smoothscroll.polyfill();
Finally it works everywhere.
Hope it helps somebody to fix mat-tabs autoscrolling emptiness :)
< 收到:
