在Ionic Vue中滚动到底部

wvyml7n5 于 2022-12-08 发布在 Ionic

关注(0)|答案(2)|浏览(213)

我在Ionic Vue中开发了一个聊天应用程序。为了总是看到最新的消息，我必须自动滚动到底部。
对于网络，我使用vue-chat-scroll，但这不适用于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与行的组合
正常ul / li列表
仅使用div

ionic-framework

来源：https://stackoverflow.com/questions/66598775/scroll-to-bottom-in-ionic-vue

2条答案

按热度按时间

hvvq6cgz1#

查看“离子含量”组件，https://ionicframework.com/docs/api/content
它有许多用于滚动的方法和事件。

赞(0）回复(0）举报 2022-12-08

bprjcwpo2#

您只需要在<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>

赞(0）回复(0）举报 2022-12-08

我来回答

在Ionic Vue中滚动到底部

2条答案

相关问题

热门标签

最新问答