问题描述
我正在尝试使用聊天和内容两个段来编写页面。我想要一个聊天段，页面自动滚动到底部，没有任何效果。聊天是< 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：自动滚动到列表/页面/聊天的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！