ionic 2 angular 2：自动滚动到列表/页面/聊天的底部

Question

我正在尝试编写包含“聊天”和“内容”两个部分的页面。我希望那个“聊天”将页面自动滚动到底部而没有任何效果。聊天是 <ion-list> 和几个 <ion-item> 。

 <ion-list>
<ion-item> item 1 </ion-item>
<ion-item> item 2 </ion-item>
....
<ion-item> item 20 </ion-item>
<ion-item> item 21 </ion-item> <!-- user should see directly this item on bottom of the page -->
</ion-list>

我使用的是 Javascript，而不是 typescript，而且我不想不使用 jQuery。谢谢 :) 另外，当我转到“内容”部分并返回“聊天”时，我想再次自动滚动聊天。

原文由 sandrina-p 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，@rinukkusu 的回答是正确的，但它不适用于我的情况，因为 <ion-content> （ <ion-list> 的父级）有一些错误（离子开发人员正在处理） ，所以我不得不将该元素与 scroll:hidden 放在一起，并在其中创建第二个内容以应用自动滚动。最后，使用正确的 (s)css，我在 construtor 上调用了该函数，当页面加载时，然后每次用户单击“聊天”部分时。

聊天.html

 <!-- I create the segment and call the `autoScroll()` when users clicks on "chat" -->
<ion-toolbar primary class="toolbar-segment">
    <ion-segment light [(ngModel)]="segment">
        <ion-segment-button value="chat" (click)="autoScroll()">
            Chat
        </ion-segment-button>
        <ion-segment-button value="profile">
            Profile
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>

<!--I wrote the css inline just as example.
  DON'T do it on your project D: -->

<!-- overflow:hidden prevent the ion-content to scroll -->
<ion-content [ngSwitch]="segment" style="overflow: hidden;">

    <!-- height: 100% to force scroll if the content overflows the container.
         #chat-autoscroll is used by javascript.-->
    <div class="content-scroll" id="chat-autoscroll" *ngSwitchWhen="'chat'" style="height: 100%; overflow: scroll">
        (... make sure the content is bigger
        than the container to see the auto scroll effect ...)
    </div>

    <!-- here it's just a normal scroll  -->
    <div *ngSwitchWhen="'profile'" class="content-scroll" style="height: 100%; overflow: auto">
      (... content of profile segment ...)
    </div>

</ion-content>

聊天.js

 constructor () {

    // when the user opens the page, it shows the "chat" segment as initial value
    this.segment = 'chat';

    // when page loads, it calls autoScroll();
    if (this.segment == 'chat') {
        console.log('chat');
        this.autoScroll();
    };
}

/*Here comes the tricky.
 If you don't use setTimeout, the console will say that
 #chat-autoscroll doesn't exist in the first call (inside constructor).
 This happens because the script runs before the DOM is ready.
 I did a workaround with a timeOut of 10ms.
 It's enough time to DOM loads and then autoScroll() works fine.
*/
autoScroll() {
    setTimeout(function () {
        var itemList = document.getElementById("chat-autoscroll");
        itemList.scrollTop = itemList.scrollHeight;
    }, 10);
}

结论： 该函数被调用了两次。加载页面（构造函数）时以及每次用户返回“聊天”部分时。 (点击)=“autoScroll()”

我希望这可以帮助别人。如果你知道更好的方法，请告诉我！几周前我开始使用 Angular2 和 Ionic2，所以这里可能缺少很多概念/基础。

谢谢 ：）

原文由 sandrina-p 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我是这样做的：

聊天页面.html

 <ion-content #content padding class="chatPage">

  <ion-list no-lines>
    <ion-item *ngFor="let msg of messages" >
      <chat-bubble [message]="msg"></chat-bubble>
    </ion-item>
  </ion-list>

</ion-content>

chatPage.html 中的重要部分是 #content on <ion-content> 。我将使用 #content 标识符在我的 chatPage.js 中使用 ViewChild -a.509- 获取对 <ion-content> --- 的引用

现在是实际的滚动逻辑：

聊天页面.js

 import {Component, ViewChild} from '@angular/core';

@Component({
  templateUrl: 'build/pages/chatPage/chatPage.html',
  queries: {
    content: new ViewChild('content')
  }
})
export class ChatPage {
  constructor() {

  }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

此外，每当我的 chatPage 需要在列表中显示另一条聊天消息（收到新消息或发送新消息）时，我都会使用以下代码滚动到新的底部：

 setTimeout(() => {
  this.content.scrollToBottom(300);//300ms animation speed
});

---

打字稿更新

当我给出这个答案时，我正在使用 Ionic 2 项目的 JavaScript 版本。随着时间的推移，我切换到 TypeScript，但我忘记更新答案，因此，这是 chatPage.js(ts) 的一个小更新：

聊天页面.ts

 import {Component, ViewChild} from '@angular/core';

@Component({
  templateUrl: 'chatPage.html'
})
export class ChatPage {
  @ViewChild('content') content:any;

  constructor() { }

  //scrolls to bottom whenever the page has loaded
  ionViewDidEnter(){
    this.content.scrollToBottom(300);//300ms animation speed
  }
}

原文由 smukov 发布，翻译遵循 CC BY-SA 3.0 许可协议