离子2 +角度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,而不是打字稿,我不想使用jQuery.谢谢:)另外,当我进入"内容"细分并回到"聊天"时,我想再次自动滚动聊天.

Answer 1

我是这样做的:

chatPage.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开启<ion-content>.我将使用#content标识符来获得参考<ion-content>我chatPage.js使用ViewChild.

现在为实际的滚动逻辑:

chatPage.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
});

打字稿的更新

回到我给出这个答案时,我正在使用JavaScript版本的Ionic 2项目.随着时间的推移,我切换到TypeScript,但我忘了更新答案,所以,这是chatPage.js(ts)的一个小更新:

chatPage.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
  }
}

Answer 2

Ionic可以选择这样做并且效果很好:这是角度2+和离子的最合适的方式.

import { Content } from ‘ionic-angular’;

export class CommentsPage{
@ViewChild(Content) content: Content;

    ionViewWillEnter(): void {
        this.scrollToBottom();
    }

    scrollToBottom() {
        setTimeout(() => {
            this.content.scrollToBottom();
        });
    }
}

Answer 3

首先，@ rinukkusu的答案是正确的，但不适用于我的情况，因为<ion-content>（的父母<ion-list>）存在一些错误（离子开发商正在研究此问题），因此我不得不将该元素放入其中scroll:hidden并创建第二个内容在内部应用自动滚动。最后，通过正确的CSS，我construtor在页面加载时调用该函数，然后在用户每次单击“聊天”段时调用该函数。

chat.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>

chat.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);
}

结论： 该函数被调用两次。页面加载后（构造函数），以及用户每次返回“聊天”段时。（click）=“ autoScroll（）”

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

谢谢 ：）