ionic4 踩坑：content 滚动到底部！

之前使用ionic3做项目，一直用的不错，自带的UI库基本可以满足一些小客户的需求，后来ionic4正式版出来了，号称“史上最高效”，抵挡不住诱惑啊，于是新项目就用ionic4，谁知各种坑，后面我一一介绍并会给出最直接有效的解决方案。

今天的坑是 content 组件。

作为一个普通项目，其实用到这个组件最多的需求是：聊天界面自动到底部能看到最后一条，以及图文页面的【TOP】按键到页面顶部。

我就是要在客户定制的系统中App聊天模块里面实现这个功能，之前ionic3的时候做过好多遍了，ionic3代码：

chat.ts

...
import {Content} from 'ionic-angular';

@ViewChild(Content) content: Content;

  /*显示消息*/
  showMessages() {
    this.messages = [];
    for (var i = 0; i < 100; i++) {
      this.messages.push(
      	{ user: '测试者', text: '第' + i + '条消息' }
      );
    }

    this.scrollToBottom(10);            //页面滚动到底部
  }
  
  /*页面滚动到底部*/
  scrollToBottom(int) {
    setTimeout(() => {
      this.content.scrollToBottom();
    }, int);
  }

理所当然的在ionic4项目中把这个过程复制了过来，谁知道！报！错！了！从此开始了6个小时的折腾，因为ionic4的技术文档不多，结合了ionic官网文档，各种折腾，各种猜测，全部失败，然后就用替代方案html原生实现了，但是看着根本就不是一回事啊，我都用ionic4了，还那么写是不是太笨了？那还用个P啊！

天可怜见，我在人工扒node_modules的时候，发现了竟然是组件改名字了！

export declare class IonContent {
    ionScrollStart: EventEmitter<CustomEvent>;
    ionScroll: EventEmitter<CustomEvent>;
    ionScrollEnd: EventEmitter<CustomEvent>;
    protected el: HTMLElement;
    constructor(c: ChangeDetectorRef, r: ElementRef);
}

原来的 Content 改成 IonContent 了，恨得我牙疼！

不过终于可以安心睡觉了，正好这个号文章是空的，写在这里记录一下。

ionic4实现content组件的自动到底部，完整代码：

import { NavController, IonContent } from '@ionic/angular';
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {
  
  /*************************************************************
   * 滚动！ionic4的Content改名了！叫“IonContent”！
   * 然后其他用法和ionic3一样，太坑了！六个多小时
   */
  @ViewChild(IonContent) content: IonContent;
  
  messageList: any = [];  //显示消息

  constructor(  ) {
      for (let i = 0; i < 100; i++) {
	      this.messageList.push(
	      	{ user: '测试者', text: '第' + i + '条消息' }
	      );
	  }
	  this.scrollToBottom(1);
  }

  ngOnInit() {
  }
  
  /**滚到底部 */
  scrollToBottom(int) {
    setTimeout(() => {
      this.content.scrollToBottom(1);
    }, int);
  }
  
}

最后顺道说一下这里的防抖延时，在ionic3里面，延时如果小于10ms，有时候会无效，但是在ionic4中，这里设置1ms都是比较稳定起效的，可能以后也会出问题，但是测试到目前还是很稳定的。这也说明ionic4确实优化了一些东西，让执行效率更高更稳定了。