Vue中如何实现滚动到顶部加载更多数据且保持滚动位置不变？-js教程-PHP中文网

Vue中如何实现滚动到顶部加载更多数据且保持滚动位置不变？

DDD

发布： 2024-11-21 18:13:05

原创

729人浏览过

vue中如何实现滚动到顶部加载更多数据且保持滚动位置不变？

vue 滚动到顶部时加载更多数据，但保持滚动位置不变

在某些场景中，我们需要类似微信聊天记录那样，当用户向上滚动到顶部时加载更多历史记录，但滚动条位置依然保持在当前位置。

下面提供一种解决方法：

<div class="container" @scroll="handlescroll" ref="chatlistref">
  <ul>
    <li v-for="item in msgs">{{ item }}</li>
  </ul>
</div>

登录后复制

import { createApp, ref, nextTick } from 'vue'

createApp({
  setup() {
    const msgs = ref([])
    const chatListRef = ref()

    const scrollToBottom = async () => {
      const chatListElement = chatListRef.value
      if (chatListElement) {
        chatListElement.scrollTop = chatListElement.scrollHeight
      }
    }

    const handleScroll = (ev) => {
      const target = event.target
      if (target.scrollTop === 0) {
        // TODO: 加载更多数据
        alert('添加完数据后希望停留在当前数据的位置，而不是最顶部')
      }
    }

    nextTick(() => {
      scrollToBottom()
    })

    return {
      msgs,
      chatListRef,
      handleScroll
    }
  }
}).mount('#app')

登录后复制

当向上滚动到顶部时，handlescroll 函数会被触发，此时可以判断 scrolltop 是否为 0，如果是，则加载更多数据并更新 msgs 数组。关键在于，在加载更多数据后，需要调用 scrolltobottom 函数将滚动条位置调整回当前位置。