在特定元素中向下滚动-Java 学习之路

我试图在vue中向下滚动新出现的元素：

我有聊天消息，我有两个数组：

data() {
  return {
    activeChats: [],
    openedChats: [],
    maxOpened: math.round(window.innerWidth / 300), 
  }
}

当我收到新消息并且对话不在活动且打开的数组中时，我添加到两者并且它出现在屏幕上，因为我在两个数组上都使用了 v-for .

这一切都有效，但我不知道如何在新聊天出现时向下滚动div，我尝试使用refs但没有运气：

<div class="chat" v-for="chat in openedChats" ref="chat-{chat.id}"></div> 甚至只是打开一个聊天聊天测试..

在成功之后 axios then() 我说：

this.$refs.chat['-'+response.data.id].scrollTo(9999999,99999999);
or
this.$refs.chat['-'+response.data.id].scrollTop = 99999999;
or
this.$refs.chat.scrollTo(9999999,99999999);
or
this.$refs.chat.scrollTop = 99999999;

并没有奏效......

有帮助吗？：d

可以在没有额外库的情况下完成，我不需要动画只是出现在元素的底部...

谢谢

1 回答

看这个例子：

https://jsfiddle.net/eywraw8t/430100/

使用"watch"（https://vuejs.org/v2/guide/computed.html）来检测消息数组中的更改（来自ajax或只是示例中的按钮） . 根据消息的索引设置id（或者如果您愿意，可以使用ref） . 然后滚动到数组中的最后一个元素（通过 array.length 获取最后一个元素） .

new Vue({
  el: "#app",
  data: {
    messages: [
      { id: 1, text: 'message' },
    ],
  },
  watch:
  {
    messages: function() {
      let id = this.messages.length;
      //takes a bit for dom to actually update
      setTimeout(function() {
          document.getElementById('message-' + id).scrollIntoView();
      }, 100);
      
    },
  },
  methods: {
    addMessage: function(){
      let id = this.messages.length + 1;
      this.messages.push({ id: id, text: 'message'});
    }
  }
})

<div id="app">
  <button v-on:click="addMessage()" style="position:fixed">
  Add message
  </button>
  <div class="message" v-for="message in messages" :id="'message-' + message.id">
    {{message.text}} {{ message.id}}
  </div>
</div>

回复于 2024-05-05T03:25:47+08:00

在特定元素中向下滚动

1 回答

相关问题