CODEWITHSUNDEEP
angulartypescriptscrollionic2ionic3
Degisim
Degisim

Reputation: 115

Ionic 2 scroll down the page at page opening

I'm doing a chat application. And when I open this chat application, I want the page to slide down. When the box is in focus, the page slips down. But the page does not slip down when it first opens. What can I do ? Chat Page Picture My Codes;

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

Upvotes: 4

Views: 867

Answers (2)

Degisim
Degisim

Reputation: 115

I solved the problem I call down scroll function in 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>

Upvotes: 1

sebaferreras
sebaferreras

Reputation: 44659

I've never used this property yet, but according to the docs:

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

So you could do it like this:

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

Upvotes: 3

Related Questions