图片描述
1、html代码

<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、组件代码

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) {
    // 如果到底不了 调用接口加载数据,追加到数组中。
}

张旭超
1.4k 声望222 粉丝

精通 html+div+css jquery, vue, angularjs, angular2, angular4, ionic, ionic2


引用和评论

0 条评论