如何在Vue中实现类似微信聊天的向上滚动加载并保持滚动条位置？-js教程-PHP中文网

如何在Vue中实现类似微信聊天的向上滚动加载并保持滚动条位置？

DDD

发布： 2025-03-17 08:14:18

原创

915人浏览过

实现类似微信聊天记录的向上滚动加载

在使用vue开发类似微信聊天的聊天记录页面时，用户常常希望在向上滚动到顶部时能够加载更多的聊天记录，并且希望滚动条能够停留在当前位置，而不是跳到最顶部。接下来我们将探讨如何实现这一效果。

首先，我们来看一下提供的代码示例：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100vh;
            background-color: #e9f5f8;
        }
        .container {
            width: 200px;
            height: 500px;
            overflow-y: auto;
            background-color: #fff;
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

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

    <script type="module">
        function generatenumbers(start, end) {
          // 确保 start 和 end 是整数
          if (!number.isinteger(start) || !number.isinteger(end)) {
            throw new error('both start and end must be integers.');
          }

          // 确保 start 小于等于 end
          if (start > end) {
            throw new error('start must be less than or equal to end.');
          }

          // 创建一个空数组来存储结果
          const numbers = [];

          // 使用 for 循环生成从 start 到 end 的所有数字
          for (let i = start; i <= end; i++) {
            numbers.push(i);
          }

          return numbers;
        }

        // 示例用法
        const result = generatenumbers(1, 200);
      import { createapp, ref, nexttick } from 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-ms/vue/3.2.31/vue.esm-browser.prod.min.js'

      createapp({
        setup() {
          const msgs = ref(result)
          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) {
                  msgs.value.unshift(...generatenumbers(201, 400))
                  alert('添加完数据后希望停留在当前数据的位置，而不是最顶部')
              }
          }

          nexttick(() => {
              scrolltobottom()
          })

          return {
            msgs,
            chatlistref,
            handlescroll
          }
        }
      }).mount('#app')
    </script>
</body>
</html>

登录后复制

在这个示例中，handlescroll 函数会在用户滚动到顶部时触发，尝试加载更多数据并将其添加到列表的开头。然而，用户希望在添加新数据后，滚动条能够保持在当前位置。

为了实现这个效果，我们需要在添加新数据后，重新设置 scrolltop 的值，使其保持在添加新数据前的位置。我们可以这样修改 handlescroll 函数：

const handleScroll = (ev) => {
  const target = ev.target;
  if (target.scrollTop === 0) {
    const currentScrollHeight = target.scrollHeight;
    msgs.value.unshift(...generateNumbers(201, 400));
    nextTick(() => {
      target.scrollTop = target.scrollHeight - currentScrollHeight;
    });
  }
}

登录后复制

通过记录添加新数据前的 scrollheight，然后在添加新数据后，重新设置 scrolltop 为 target.scrollheight - currentscrollheight，这样就可以保持滚动条的位置不变。