文档章节

Angular实现DIV自动滚屏到底部scrollToBottom

lieefu
 lieefu
发布于 2017/04/19 14:24
字数 237
阅读 50
收藏 0

设计一个聊天网页,需要把显示聊天内容的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

© 著作权归作者所有

共有 人打赏支持
lieefu
粉丝 90
博文 116
码字总数 24677
作品 3
济南
高级程序员
使用angular.bootstrap完成模块的手动加载

之前我们看到使用ng-app指令,可以实现模块的自动加载。现在我们看下,angular中如何手动加载模块。需要使用到angular.bootstrap这个函数。 [html] view plaincopy <html> <head> <script sr...

前端热爱者
2017/11/07
0
0
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
0
0
AngularJS应用开发思维之1:声明式界面

这篇博客之前承接上一篇:http://www.cnblogs.com/xuema/p/4335180.html 重写示例:模板、指令和视图 AngularJS最显著的特点是用静态的HTML文档,就可以生成具有动态行为的页面。 还是前面的...

笔阁
2015/03/16
0
0
我们为什么以及是如何从Angular.js 迁移到 Vue.js?

一些背景介绍 我们的应用程序(Holistics.io )是一个基于 SQL的商业智能(BI)平台,使用Rails、Sidekiq、PostgreSQL和AngularJS编写。我们的Rails应用程序始于2013年底,作为一个简单的应用...

燕儿199606
06/14
0
0
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
04/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day122-20181020-英语流利阅读-待学习

蜘蛛侠新片《毒液》来袭!导演灵感来自哪? Roxy 2018-10-20 1.今日导读 你还记得漫威宇宙中飞檐走壁的蜘蛛侠小可爱吗?在刚过去的国庆黄金周里,索尼影业发行的漫威超级英雄蜘蛛侠系列大片《...

飞鱼说编程
17分钟前
1
0
美团点评Docker容器管理平台

美团点评容器平台简介 本文介绍美团点评的Docker容器集群管理平台(以下简称“容器平台”)。该平台始于2015年,是基于美团云的基础架构和组件而开发的Docker容器集群管理平台。目前该平台为...

Skqing
23分钟前
1
0
JDK8笔记

判断两个对象是否相等 Objects.equals(value1, value2)

呼呼南风
今天
1
0
OSChina 周六乱弹 —— 到底谁是小公猫……

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Trivium的单曲《Throes Of Perdition》 《Throes Of Perdition》- Trivium 手机党少年们想听歌,请使劲儿戳(这里) @小鱼丁:...

小小编辑
今天
354
5
基础选择器

注意:本教程参考自网上流传的李兴华老师的jquery开发框架视频,但是苦于没有相应的配套笔记,由我本人做了相应的整理. 本次学习的内容 学习jquery提供的各种选择器的使用,掌握了jquery选择...

江戸川
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部