Angular cdk 学习之 Scrolling

       Angular cdk Scrolling包给我们提供了一些指令和Service来应对滑动事件。推荐大家尽量去看官网上的介绍https://material.angular.io/cdk/scrolling/overview

       想要在我们项目中使用cdk Scrolling功能，需要在我们模块里面 import {ScrollDispatchModule} from ‘@angular/cdk/scrolling’;

一 cdkScrollable and ScrollDispatcher

       cdkScrollable指令单独使用的时候没有特别的效果，cdkScrollable指令一般用来配合ScrollDispatcher Service使用。任何添加了cdkScrollable指令的视图元素都会注册到ScrollDispatcher里面去。然后可以在ScrollDispatcher里面去监听元素的滑动事件。

1.1 ScrollDispatcher常用方法介绍

export declare class ScrollDispatcher implements OnDestroy {

    /**
     * 订阅全局`scroll`和`resize`
     */
    _globalSubscription: Subscription | null;
    /**
     * 注册到ScrollDispatcher里面的元素(添加了CdkScrollable指令的元素)
     */
    scrollContainers: Map;
    /**
     * 注册CdkScrollable(我们不用管，我们在某个视图元素上添加CdkScrollable指令会自动注册的)
     */
    register(scrollable: CdkScrollable): void;
    /**
     * 取消注册
     */
    deregister(scrollable: CdkScrollable): void;
    /**
     * 可以去订阅任务一个注册CdkScrollable的scroll事件
     *
     * **Note:** 为了避免每次滚动都发送状态变化检测,内部采用的是NgZone.runOutsideAngular。所以如果你想每次都检测变化就采用NgZone.run的放
     * 有疑问可以去搜下NgZone的使用
     */
    scrolled(auditTimeInMs?: number): Observable;
    /**
     * 监听elementRef视图元素的祖先元素有滚动事件，当然了对应的祖先元素需要添加CdkScrollable指令
     * auditTimeInMs参数是为了防止事件发送过快，可以设置多长时间收一次事件
     */
    ancestorScrolled(elementRef: ElementRef, auditTimeInMs?: number): Observable;
    /**
     *  elementRef添加了CdkScrollable指令的祖先元素
     */
    getAncestorScrollContainers(elementRef: ElementRef): CdkScrollable[];
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

1.2 cdkScrollable and ScrollDispatcher使用

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {CdkScrollable, ScrollDispatcher} from '@angular/cdk/overlay';

@Component({
    selector: 'app-cdk-scrolling',
    template: `
        
        

            
item 1

            
item 2

            
item 3

        

        
        

            
item 1

            
item 2

            
item 3

        

    `,
    styles: [`
        .scrolling-parent {
            height: 100px;
            width: 200px;
            border: 1px solid black;
            padding: 8px;
            overflow-y: auto;
        }
        .scrolling-item {
            height: 50px;
        }
    `]
})
export class CdkScrollingComponent implements OnInit, AfterViewInit {

    @ViewChild('scrollingParent')
    childDiv: ElementRef;

    constructor(private scrollDispatcher: ScrollDispatcher) {
    }

    ngOnInit() {
        /**
         * 监听所有ScrollDispatcher里面注册的CdkScrollable的scroll事件
         */
        this.scrollDispatcher.scrolled().subscribe((scrollable: CdkScrollable) => {
            if (scrollable) {
                console.log('发生scroll了，來源于：');
                console.log(scrollable.getElementRef().nativeElement);
            }
        });
    }

    ngAfterViewInit(): void {
        /**
         * 第二个参数auditTimeInMs表示事件延时多少秒发生
         * 当祖先设置了cdkScrollable指令，在孩子里面也能抓到scrolling事件
         */
        this.scrollDispatcher.ancestorScrolled(this.childDiv).subscribe((scrollable: CdkScrollable) => {
            if (scrollable) {
                console.log('祖先发生scroll了，來源于：');
                console.log(scrollable.getElementRef().nativeElement);
            }
        });
        // 获取ScrollDispatcher里面所有注册了scrolling的组件信息
        console.log(this.scrollDispatcher.scrollContainers);
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

二 ViewportRuler

       ViewportRuler也是cdk Scrolling里面提供的一个Service。用来测量浏览器的视图窗口信息。

2.1 ViewportRuler常用方法

export declare class ViewportRuler implements OnDestroy {
    /**
     * 获取浏览器窗口的宽度和高度 
     */
    getViewportSize(): Readonly<{
        width: number;
        height: number;
    }>;
    /**
     * 获取浏览器窗口的rect信息(left、top、right、bottom) 
     */
    getViewportRect(): ClientRect;
    /**
     * 获取浏览器窗口的滑动位置(top、left) 
     */
    getViewportScrollPosition(): ViewportScrollPosition;
    /**
     * 监听浏览器窗口大小变化
     */
    change(throttleTime?: number): Observable;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

2.2 ViewportRuler使用实例

import {Component, OnInit} from '@angular/core';
import {ViewportRuler} from '@angular/cdk/overlay';

@Component({
    selector: 'app-cdk-scrolling',
    template: `
    `
})
export class CdkScrollingComponent implements OnInit {


    constructor(private viewPortRuler: ViewportRuler) {
    }

    ngOnInit() {
        /**
         * ViewportRuler 用来监听窗口的大小
         */
        // { width, height }
        console.log(this.viewPortRuler.getViewportSize());

        // { bottom, height, left, right, top, width }
        console.log(this.viewPortRuler.getViewportRect());

        // { top, left }
        console.log(this.viewPortRuler.getViewportScrollPosition());

        // native resize event object
        this.viewPortRuler.change().subscribe(resizeEvent => console.log(resizeEvent));

    }

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

三 CdkVirtualScrollViewport

       angular cdk 里面给提供了一个scrolling的组件CdkVirtualScrollViewport - cdk-virtual-scroll-viewport。CdkVirtualScrollViewport组件在list展示的时候非常有用，比如有我们list里面的item有1000项的时候。CdkVirtualScrollViewport 并不会直接给我们加载出1000项。只会加载部分项。一边滑动一边加载。如果有做过android的话，应该会知道ListView里面的回收机制。CdkVirtualScrollViewport组件做的也是类似的事情。

3.1 CdkVirtualScrollViewport组件主要方法介绍

export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, OnDestroy {

    /**
     * 这个是CdkFixedSizeVirtualScroll里面的属性，也是可以设置在CdkVirtualScrollViewport组件上的
     * CdkVirtualScrollViewport组件里面每个item的大小(通过orientation来知道是高度还宽度)
     */
    @Input()
    get itemSize(): number { return this._itemSize; }

    /**
     * 这个是CdkFixedSizeVirtualScroll里面的属性，也是可以设置在CdkVirtualScrollViewport组件上的
     * 多加载滚动范围之后多少像素的距离(最小值)，比如CdkVirtualScrollViewport的高度是200px,minBufferPx
     * 是100px;  item有好多的情况下不用全部绘制出来。绘制200像素的内容就好了。
     */
    @Input()
    get minBufferPx(): number { return this._minBufferPx; }

    /**
     * 这个是CdkFixedSizeVirtualScroll里面的属性，也是可以设置在CdkVirtualScrollViewport组件上的
     * 多加载滚动范围之后多少像素的距离(最大值)
     */
    @Input()
    get maxBufferPx(): number { return this._maxBufferPx; }

    /**
     * viewport 方向
     */
    @Input() orientation: 'horizontal' | 'vertical' = 'vertical';

    /**
     * 活动过程中，当前可见第一项的index
     */
    @Output() scrolledIndexChange: Observable =
        Observable.create((observer: Observer) =>
            this._scrollStrategy.scrolledIndexChange.subscribe(index =>
                Promise.resolve().then(() => this.ngZone.run(() => observer.next(index)))));

    /**
     * 设置滑动位置
     */
    scrollToOffset(offset: number, behavior: ScrollBehavior = 'auto'){}

    /**
     * 设置滑动的index
     */
    scrollToIndex(index: number,  behavior: ScrollBehavior = 'auto') {}

    /**
     * 测量可滑动的大小
     */
    measureScrollOffset(from?: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end'): number {}

    /**
     * 测量所有item在一起的高度
     */
    measureRenderedContentSize(): number{}}



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

上面主要方法介绍我把CdkVirtualScrollViewport组件和CdkFixedSizeVirtualScroll指令揉到一起去介绍了，因为它俩本来就是一起配合使用的。

3.2 CdkVirtualForOf指令

       Selector: [cdkVirtualFor][cdkVirtualForOf]

       CdkVirtualScrollViewport适用于list的情况，list循环的时候得配合CdkVirtualForOf指令来使用，CdkVirtualForOf的用法和ngFor的用法是一样的。CdkVirtualForOf指令是专门为CdkVirtualScrollViewport组件提供的。 就不用ngFor指令了。切记。如果想咱们平常一样用ngFor指令去循环，很多CdkVirtualScrollViewport组件里面特有的功能就用不了了。

3.3 CdkVirtualScrollViewport组件使用

       想使用angular cdk Scrolling里面的功能先导入ScrollDispatchModule模块。

import {ScrollDispatchModule} from '@angular/cdk/scrolling';

  • 1

3.3.1 CdkVirtualForOf指令的使用

       主要是知道CdkVirtualForOf里面有哪些参数是可用的

import {Component, ViewChild} from '@angular/core';
import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";

@Component({
    selector: 'app-virtual-scroll',
    template: `
        
        
            
            

                
Item: {{item}}

                
Index: {{index}}

                
Count: {{count}}

                
First: {{first ? 'Yes' : 'No'}}

                
Last: {{last ? 'Yes' : 'No'}}

                
Even: {{even ? 'Yes' : 'No'}}

                
Odd: {{odd ? 'Yes' : 'No'}}

            

        

        
    `,
    styles: [`
        .example-viewport {
            height: 200px;
            width: 200px;
            border: 1px solid black;
        }

        .example-item-detail {
            height: 18px;
        }
    `]
})
export class VirtualScrollComponent {

    @ViewChild('scrollComponent')
    private _scrollViewport: CdkVirtualScrollViewport;

    /**
     * CdkVirtualScrollViewport组件的数据源
     */
    items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);

    /**
     * 点击按钮的时候跳转到第10项
     */
    onButtonClick() {
        this._scrollViewport.scrollToIndex(10);
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61

3.3.2 水平方向滚动的CdkVirtualScrollViewport组件

       orientation属性的使用

import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'app-virtual-scroll-horizontal',
    template: `
        

            
                
{{item}}

            
        

    `,
    styles: [`
        .cdk-virtual-scroll-data-source-example .example-viewport {
            height: 200px;
            width: 200px;
            border: 1px solid black;
        }

        .cdk-virtual-scroll-data-source-example .example-viewport .cdk-virtual-scroll-content-wrapper {
            display: flex;
            flex-direction: row;
        }

        .cdk-virtual-scroll-data-source-example .example-item {
            width: 50px;
            height: 100%;
            writing-mode: vertical-lr;
        }

    `],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class VirtualScrollHorizontalComponent {

    /**
     * CdkVirtualScrollViewport组件里面的数据源
     */
    items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

       关于angular cdk Scrolling里面咱们就先讲这么些，主要讲了cdkScrollable指令、ScrollDispatcher Service、ViewportRuler Service、CdkVirtualScrollViewport组件等一些很浅显的用法。如果大家有什么疑问欢迎留言。文章中涉及到的例子链接地址 https://github.com/tuacy/angular-cdk-study

注：本文转载自blog.csdn.net的tuacy的文章"https://blog.csdn.net/wuyuxing24/article/details/85015750"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！