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

ionic 2 + angular 2 : auto scroll to bottom of list / page / chat(ionic 2 + angular 2:自动滚动到列表/页面/聊天的底部)

问题描述

我正在尝试编写包含聊天"和内容"两个部分的页面.我希望那个聊天"分段页面自动滚动到底部而没有效果.聊天是一个 <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，而不是 typescript，而且我不想使用 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.

推荐答案

首先，@rinukkusu 的答案是正确的，但它不适用于我的情况，因为 <ion-content> (<ion-list>) 的父级有一些错误(离子开发人员正在解决这个问题)，所以我不得不将该元素与 scroll:hidden 并创建里面的第二个内容以应用自动滚动.最后，当页面加载时，我在 construtor 上调用了正确的 (s)css 函数，然后每次用户点击聊天"段时.

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

结论:该函数被调用两次.当页面被加载(构造函数)并且每次用户回到聊天"段时.(click)="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.

谢谢:)

这篇关于ionic 2 + angular 2:自动滚动到列表/页面/聊天的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！