問題描述
我正在嘗試編寫包含聊天"和內(nèi)容"兩個部分的頁面.我希望那個聊天"分段頁面自動滾動到底部而沒有效果.聊天是一個 <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>
.
我使用的是 Javascript,而不是 typescript,而且我不想使用 jQuery.謝謝 :)另外,當(dāng)我轉(zhuǎn)到內(nèi)容"部分并返回聊天"時,我想再次自動滾動聊天.
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>
) 的父級有一些錯誤(離子開發(fā)人員正在解決這個問題),所以我不得不將該元素與 scroll:hidden
并創(chuàng)建里面的第二個內(nèi)容以應(yīng)用自動滾動.最后,當(dāng)頁面加載時,我在 construtor
上調(diào)用了正確的 (s)css 函數(shù),然后每次用戶點擊聊天"段時.
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
chat.js
結(jié)論:該函數(shù)被調(diào)用兩次.當(dāng)頁面被加載(構(gòu)造函數(shù))并且每次用戶回到聊天"段時.(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,所以這里可能缺少很多概念/基礎(chǔ).
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.
謝謝:)
這篇關(guān)于ionic 2 + angular 2:自動滾動到列表/頁面/聊天的底部的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網(wǎng)!