scroll - Ionic4 scrollToBottom 没有效果
问题描述
我正在关注https://www.joshmorony.com/automatic-scroll-to-bottom-chat-interface-with-mutation-observers-in-ionic/尝试滚动,但没有效果。
我还没有使用可变的可观察部分。并且基于在某些情况下应该只从滚动中跳过最后一条消息的帖子。但就我而言,滚动根本不会发生。我检查了控制台,也没有错误
我的代码如下所示:
<ion-content fullscreen>
<div class="full-screen-bg">
<div style="border-top: 1px solid #5b63f8">
<ion-segment (ionChange)="segmentChanged($event)" mode="md" style="padding-top:15px;padding-bottom: 0px" value="feed">
<ion-segment-button value="feed">
FEED
</ion-segment-button>
<ion-segment-button value="explore">
EXPLORE
</ion-segment-button>
</ion-segment>
<div [ngSwitch]="eventTab">
<div *ngSwitchCase="'feed'" >
<ion-list *ngIf="messages" lines="full" style="background:transparent" #content>
<ion-item style="padding-top:10px;" *ngFor="let msg of messages | async;let last = last ">
<ion-row style="width:100%;">
<ion-col size="3">
<ion-row>
<ion-col class="sg-reg-text">{{formatName(msg.name)}}</ion-col>
</ion-row>
<ion-row>
<ion-col style="padding:0;padding-left:8px" class="sg-tiny-text"><ion-icon name="time" color="light"></ion-icon> {{timeSince(msg.date)}}</ion-col>
</ion-row>
</ion-col>
<ion-col style="border-bottom: 1px solid #7e7c8d;padding-bottom: 10px">
<ion-row>
<ion-col class="sg-reg-text">{{msg.message}}</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-item>
</ion-list>
</div>
<div *ngSwitchCase="'explore'" style="padding:40px">
</ion-content>
.ts 文件
@ViewChild(Content) contentArea: Content;
messages:Observable<Post[]>
send(){
console.log("posting:" + this.message)
if(this.message == undefined || this.message.trim() == '')
return
var post = new Post(this.core.name, this.message, this.core.uid, (new Date()).getTime())
this.sgSvc.postMessage(post).then(
(rsp) => {
console.log('success')
this.message = ''
this.scrollToBottom();
}
)
}
scrollToBottom() {
setTimeout(() => {
if (this.contentArea.scrollToBottom) {
this.contentArea.scrollToBottom();
}
}, 400);
}
解决方案
我能够通过使用它来解决它
this.contentArea.el.scrollToBottom();
我希望它有帮助
推荐阅读
- azure - azure databricks 是否支持来自 azure postgresql 的流访问?
- r - 使用混合模型执行重复测量方差分析
- python - 在 Python 中更快地更新绘图,而不是使用 plot.pause()
- delphi - Microsoft Jet 数据库找不到对象
- d3.js - MS Edge 不在 3D 力有向图中渲染线条
- python - cx_Freeze ImportError: DLL load failed while importing _ctypes: 找不到指定的模块
- java - SpringBoot 不从 yml 配置创建数据源
- c# - 以编程方式创建包含用户控件的用户控件的问题
- r - 如何用 lm 模型结果的 p 值绘制 geom_smooth 线?
- kotlin - TornadoFX - 实例化解耦控制器的正确方法?