如何在使用 Nuxt.js 的聊天对话中在页面加载时向下滚动到特定 div 的底部？

Question

我想向下滚动到最后一个 div

<div v-for="(message, message_index) in messageArray" :key="message_index">
    <div class="chatList">       
    </div>
 </div>

Answer 1

我假设您有一个聊天组件，您希望在页面加载时向下滚动到最后一条消息。

虽然有很多方法可以实现这一点，但我发现这是最简单的一种。 scrollIntoView() 在 this.$nextTick(function () {}) 内完成工作。

使用唯一 ID 将循环内的每个 div 绑定。 :id="`m-(some_unique_id)`">

<div v-for="(message, message_index) in messageArray" :key="message_index">
    <div :id="`m-${message.id}`">       
    </div>
</div>

并得到messageArray最后一个索引的element。并告诉 scrollIntoView 向下滚动到 div。

脚本

<script>
  mounted: {
    this.getChatBoxUsersChats();
  },
  
  methods: {
    getChatBoxUsersChats() {
      this.$nextTick(function () {
        let length = this.messageArray.length;
          if (length > 0) {
            let id = this.messageArray0[length - 1].id;
            let element = document.getElementById("m-" + id);
            element.scrollIntoView({ behavior: "smooth", block: "end" });
          });
        },
      },
    }
</script>

如何在使用 Nuxt.js 的聊天对话中在页面加载时向下滚动到特定 div 的底部？

How can I scroll down to bottom of a specific div on page load in a chat conversation using Nuxt.js?

adonis.js

nuxtjs