Angular实现DIV自动滚屏到底部scrollToBottom
博客专区 > lieefu 的博客 > 博客详情
Angular实现DIV自动滚屏到底部scrollToBottom
lieefu 发表于1年前
Angular实现DIV自动滚屏到底部scrollToBottom
  • 发表于 1年前
  • 阅读 32
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

设计一个聊天网页,需要把显示聊天内容的div自动滚屏到底部,但是div缺少scrollTo函数,变通的方法是

div.scrollTop = div.scrollHeight

但在angular中,如何找到这个时机呢? ngFor执行完毕是个时机,但ngFor语句没有提供finished事件。这个事件只能自己制造。

<li *ngFor="let item in Items; let last = last">
  ...
  <span *ngIf="last">{{ngForCallback()}}</span>
</li>

 component中增加ngForCallback方法

public ngForCallback() {
  ...
}

推荐使用AfterViewChecked and @ViewChild 方法,下面详细介绍:

在component中:

import {..., AfterViewChecked, ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class ChannelComponent implements OnInit, AfterViewChecked {
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    //ngOnInit() { 
    //    this.scrollToBottom();
    //}

    ngAfterViewChecked() {        
        this.scrollToBottom();        
    } 

    scrollToBottom(): void {
        try {
            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        } catch(err) { }                 
    }
}

在template中:

<div #scrollMe style="overflow: scroll; height: xyz;">
    <div class="..." 
        *ngFor="..."
        ...>  
    </div>
</div>

AfterViewChecked的缺陷是每次组件试图检查后都调用,input控件中,每次keyup都需要检查,调用次数太多。

参考资料:

  1. http://stackoverflow.com/questions/35819264/angular-2-callback-when-ngfor-has-finished
  2. http://stackoverflow.com/questions/35232731/angular2-scroll-to-bottom-chat-style
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 87
博文 108
码字总数 23811
作品 3
×
lieefu
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: