angular2 滚动条到底部，发送消息框_angularjs

上一篇: 使用angular框架离线你的应用（p... 下一篇:angular2.0 笔记 - 02

angular2 滚动条到底部，发送消息框

发布时间：2019-06-04 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了angular2 滚动条到底部，发送消息框，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。


1、htML代码

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test
  test


" tITle="" data-original-title="复制">
      
      
<div #scrollMe style="height: 100px; overflow: scroll; background: #fff; border: 1px solid #aaa;">
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</div>
<button (click)="goToScrollBottom()">发送</button>

2、组件代码

      
      
      
      
      
@H_894_360@import {component} From '@Angular/core';
// 滚动条使用组件
import {ElementRef, AfterViewChecked, ViewChild} from "@angular/core";

@Component({
    selector: 'app-root',
    templateUrl: './app.COMponent.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewChecked {
    constructor() {

    }
    @ViewChild("scrollMe")
    // 获取元素
    public myScrollContainer: ElementRef;
    
    
    // 其实上面两句代码可以写成：
    // @ViewChild("scrollMe") myScrollContainer;

    ngAfterViewChecked() {
        this.scrollToBottom();
    }

    // 方法调用
    goToScrollBottom() {
        this.scrollToBottom();
    }

    scrollToBottom() {
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    }
}


      
      
      
      
      
如何判断滚动条到底部了
if ((this.myScrollContainer.nativeElement.scrollTop + this.myScrollContainer.nativeElement.clientHeight) == this.myScrollContainer.nativeElement.scrollHeight) {
    // 如果到底不了 调用接口加载数据，追加到数组中。
}