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

时间:2017-10-04 12:20:16

标签: angular typescript scroll ionic2 ionic3

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



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




2 个答案:

答案 0 :(得分:3)

我从未使用此属性,但根据 the docs

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

所以你可以这样做:

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

答案 1 :(得分: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>