Ionic 2 在页面打开时向下滚动页面答案

【问题标题】：Ionic 2 scroll down the page at page openingIonic 2 在页面打开时向下滚动页面
【发布时间】：2018-03-15 20:10:07
【问题描述】：

我正在做一个聊天应用程序。当我打开这个聊天应用程序时，我希望页面向下滑动。当框处于焦点时，页面会向下滑动。但是页面在第一次打开时不会滑落。我能做些什么？ Chat Page Picture 我的代码；

ionViewDidEnter() {
  this.chat();
}
scrollToBottom() {
  if (this.content.scrollToBottom) {
     this.content.scrollToBottom();
  }
} 
onFocus() {
    this.content.resize();
    this.scrollToBottom();
    this.keyboard.show();
}

【问题讨论】：

@suraj Okey，我添加到答案中。谢谢

标签： angular typescript scroll ionic2 ionic3

【解决方案1】：

我解决了问题 我在 HTML 中调用向下滚动功能

<ion-content no-padding>
    <div class="message-wrap" >
        <div *ngFor="let msg of gelenMesajlar; let i = index" class="message" [class.left]=" msg.GONDEREN === 'F' " [class.right]=" msg.GONDEREN === 'C' ">
            <div class="msg-detail">
                <div class="msg-content">
                    <span class="triangle"></span>
                    <span [style.font-size]="'10px'" *ngIf="msg.SIPARISID" [style.text-decoration]="'underline'">Konu #{{ msg.SIPARISID }} numaralı sipariş</span>
                    <p class="line-breaker">{{msg.MESAJ}}</p>
                    <span *ngIf="msg.SIPARISID" [style.font-size]="'12px'" (tap)="siparisGoruntule(msg.RESIMID, msg.SIPARISDURUMU, msg.SIPARISID)" [style.text-decoration]="'underline'">Siparişi Görüntüle</span>
                </div>

            </div>
        </div>
        {{ scrollToBottom() }}  <!-- Here it is-->
    </div>
</ion-content>

【讨论】：

这对您来说完美吗？以我的经验，当所有消息都完全呈现时，应该调用您的 scrollToBottom 函数。加载消息可能存在延迟，在这种情况下，scrollToBottom 将在消息呈现之前运行。
当然，我还有一个问题。使用此代码，当我加载消息然后向上滑动页面时，它再次使我向下移动。 @阿里
@Degisim 你试过我的答案了吗？（我真的很好奇，因为它是内容组件中相对较新的属性）
@sebaferreras 我试过但我没有得到结果:)
@Degisim：如何确保在加载所有消息之前不滚动？

【解决方案2】：

我还没有使用过这个属性，但是根据the docs：

Attr                Type        Details
-------------------------------------------------------------------------------
scrollDownOnLoad    boolean     If true, the content will scroll down on load.

所以你可以这样做：

<ion-content scrollDownOnLoad="true">
    <!-- ... -->
</ion-content>

【讨论】：