离子2 +角度2：自动滚动到列表/页面/聊天的底部 [英] ionic 2 + angular 2 : auto scroll to bottom of list / page / chat

问题描述

我正在尝试使用聊天和内容两个段来编写页面。我想要一个聊天段，页面自动滚动到底部，没有任何效果。聊天是< ion-list> ，其中有几个< ion-item> 。

I'm trying to code a page with two segments "chat" and "content". I want that one "chat" segment the page auto-scroll to the bottom with no effect. The chat is a <ion-list> with several <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。
谢谢:)
另外，当我进入内容段并返回聊天时，我想再次自动滚动聊天。

I'm using Javascript, not typescript, and I don't wan't to use jQuery. Thanks :) Plus, when I go to "content" segment and go back to "chat" I want to auto-scroll again the chat.

推荐答案

首先，@ linukkusu回答是对的，但它对我的情况不起作用，因为< ion-content> （的父级< ion-list> ）有一些错误（离子开发人员正在努力），所以我不得不把这个元素放在滚动：隐藏并在里面创建第二个内容以应用自动滚动。
最后使用右（s）css我在页面加载时调用 construtor 上的函数，然后每次用户点击聊天段时。

First off all, @rinukkusu answer is right but it doesn't work on my case because <ion-content> (parent of <ion-list>) has some bugs with it (ionic developers are working on that), so I had to put that element with scroll:hidden and create a second content inside to apply the auto-scroll. Finally with the right (s)css I called the function on construtor when the page loads and then each time the users clicks on "chat" segment.

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

结论：
功能是叫了两次。当页面被加载（构造函数）并且每次用户回到聊天段时。 （点击）=autoScroll（）

Conclusion: The function is called twice. When the page is loaded (constructor) and each time the user comes back to "chat" segment. (click)="autoScroll()"

我希望这有助于某人。如果你知道更好的方式，请告诉我！几周前我开始玩Angular2和Ionic2所以我可能会在这里找到许多概念/基础。

I hope this helps someone. If you know better way, let me know! I started playing with Angular2 and Ionic2 a couple of weeks ago so there is a lot of concepts/bases that I might be missing here.

谢谢:)

这篇关于离子2 +角度2：自动滚动到列表/页面/聊天的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！