Vue.js는 화면상의 현재 메시지 포스처를 변경하지 않고 이전 채팅메시지를 렌더링합니다.

Vue.js는 화면상의 현재 메시지 포스처를 변경하지 않고 이전 채팅메시지를 렌더링합니다.

사용하고 있다v-for메시지 목록을 렌더링합니다.첫 번째 메시지 배치가 렌더링되면scrollIntoView()컨테이너가 바닥으로 스크롤되도록 가장 최신의 것을 사용하세요.사용자가 위로 스크롤하면 나는 매끄러운 스크롤을 만들기 위해 이전 메시지를 가져옵니다.문제는 새 메시지가 렌더링될 때 스크롤이 컨테이너의 맨 위로 이동한다는 것입니다.

가져온 메시지로 목록을 업데이트하기 전에 목록의 첫 번째 메시지 ID를 저장한 후 해당 메시지로 스크롤하려고 했지만 화면이 잠시 점프를 일으켜 사용자 환경이 좋지 않습니다.

메시지 목록에 오래된 메시지를 추가하고 렌더링하여 현재 메시지가 화면 어디에 있든 제자리에 있도록 하려면 어떻게 해야 합니까?

메시지 목록은 vuex에 저장되며 다음 작업을 사용하여 업데이트합니다.

HandleMessageList({state, commit}, msgList) {
    const currentMessages = state.messages
    const updatedMessages = msgList.concat(currentMessages)
    commit('SET_MESSAGES', updatedMessages)
}

및 템플릿:

<template>
  <div class=msg-container" ref="messageDisplayArea">
    <message-object
      v-for="msg in msgList"
      :key="msg.id"
    />
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "MessageDisplay",
  components: {
    MessageObject,
  },
  computed: {
    ...mapState({
      msgList: state => state.messages,
    }),
  },
  updated() {
    this.$nextTick(() => this.scrollToTarget())
  },
  mounted() {
    this.$refs.messageDisplayArea.addEventListener('scroll', this.handleUserScroll)
  },
  beforeDestroy() {
    this.$refs.messageDisplayArea.removeEventListener('scroll', this.handleUserScroll)
  },
  methods: {
    scrollToTarget() {
       // ... scroll back to the position before message list update
    },
    handleUserScroll(e) {
      const scrollTop = e.target.scrollTop
      const scrollHeight = e.target.scrollHeight
      const elementHeight = e.target.offsetHeight
      if (scrollTop === 0 && elementHeight < scrollHeight) {
        // ... fetch older messages
      }
    },
  },
}
</script>

버전:

vue 2.6.10
vuex 3.0.1

언급URL : https://stackoverflow.com/questions/70489022/vue-js-render-previous-chat-messages-without-changing-the-postition-of-current-m