問題描述

我正在嘗試編寫包含聊天"和內容"兩個部分的頁面.我希望那個聊天"分段頁面自動滾動到底部而沒有效果.聊天是一個 <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:自動滾動到列表/頁面/聊天的底部的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！