在Ionic Vue中滚动到底部

Question

我在Ionic Vue中开发了一个聊天应用程序。为了总是看到最新的消息，我必须自动搜索到底部。

对于网络，我使用vue聊天滚动，但这不适用于Ionic vue。

我尝试了很多不同的策略，但都不起作用：

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

或

this.scrollIntoView(false);

或

var element = document.getElementById("scroll");
element.scrollIntoView();

或

vue-scroll-to with a hidden anchor at the end of the view

我还尝试了列出聊天消息的不同方法：

• IonGrid与Rows的组合
• 一个普通的ul/li列表
• 只使用div

Answer 1

看看"离子含量"；组成部分https://ionicframework.com/docs/api/content

它有许多滚动的方法和事件。

Answer 2

您只需要在<ion-content>元素上调用方法.scrollToBottom()。您可以使用以下方法，用ref引用ion-content，并调用下面的方法scrollToBottom：

<template>
<ion-content ref="content">
</ion-content>
</template>
export default defineComponent({
methods: {
scrollToBottom(){
this.$refs['content'].scrollToBottom()
}
},
});
</script>