web端中使用vue3 实现移动端的上拉滚动加载功能

唱一首情歌.

于 2024-06-07 09:41:27 发布

阅读量362

点赞数 9

分类专栏：前端经验笔记文章标签：前端 css scroll vue3 html

本文链接：https://blog.csdn.net/lele66688888/article/details/139516383

版权

前端经验同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

笔记

23 篇文章 0 订阅

订阅专栏

需要再web端实现上拉加载纯属web端的东西

类似这样的功能效果

能够在web端实现滚动分页

        overflow-y: scroll;

首先给这个大盒子一个 css 样式支持滚动再给固定高度

这个盒子里的内容就能立马滚动起来

给这个盒子一个ref 的属性以及有原生滚动事件 scroll

const handleScroll = () => {
  if (scrollBox.value.scrollTop + scrollBox.value.clientHeight >= scrollBox.value.scrollHeight) {
    // 滚动到底部的逻辑
    console.log('滚动到底部了')
    // 例如，你可以在这里发起一个请求来加载更多数据
  }
}

在这个里面就可以实现滚动的监听滑动到底部就可以知道然后可以实现分页

这个是vue3 里实现的功能因为是web端一般没有这样的滚动效果既然问题出来了就肯定有解决办法所以就是以上的写法。

原生html 中的滚动我这里也有部分代码我就不详细解释了大家都能看懂的原生html 用的也少了移动端中有封装好的scroll-view 所以就更简单了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .hide {
      display: none;
    }

    .scroll {
      height: 200px;
      width: 300px;
      overflow-y: auto;
      border: 1px solid #ddd;
    }

    .loading {
      text-align: center;
    }

    ul {
      margin: 0;
      padding: 0;
    }

    li {
      padding: 10px;
      margin: 10px;
      text-align: center;
      background: red;
      list-style-type: none;
    }
  </style>
</head>

<body>
  <div id="js-scroll" class="scroll">
    <ul id="js-list">
      <li>000000</li>
      <li>000000</li>
      <li>000000</li>
      <li>000000</li>
      <li>000000</li>
    </ul>
    <div class="loading hide" id="js-loading">加载中...</div>
  </div>
</body>

<script>
  let indexSum = 0 // 列表个数
  const listDom = document.getElementById('js-list')
  const loadingDom = document.getElementById('js-loading')

  /**
   * 使用MutationObserver监听列表的 DOM 改变
   */
  const config = {
    attributes: true, // 布尔值，属性的变动
    childList: true, // 布尔值，子节点的变动（指新增、删除、更改）
    subtree: true // 布尔值，表示，是否将该观察器，应用于该节点的所有后代节点
  }
  const callback = function (mutationsList, observer) {
    for (let mutation of mutationsList) {
      if (mutation.type === 'childList') {
        if (indexSum === 5) {
          loadingDom.innerText = '加载完毕'
        } else {
          loadingDom.classList.add('hide')
        }
      }
    }
  }
  const observer = new MutationObserver(callback)
  observer.observe(listDom, config)

  /**
   * clientHeight 滚动可视区域高度
   * scrollTop 当前滚动位置
   * scrollHeight 整个滚动高度
   */
  const scrollDom = document.getElementById('js-scroll')
  scrollDom.onscroll = () => {
    if (scrollDom.clientHeight + parseInt(scrollDom.scrollTop) === scrollDom.scrollHeight) {
      if (loadingDom.classList.contains('hide') && indexSum <= 5) {
        loadingDom.classList.remove('hide')
        addList()
      }
      if (indexSum >= 5) {
        observer.disconnect() // 加载完毕停止监听列表 DOM 变化
      }
    }
  }

  /**
   * 添加列表
   */
  function addList() {
    const fragment = document.createDocumentFragment()
    setTimeout(() => {
      ++indexSum
      for (let i = 0; i < 5; i++) {
        const li = document.createElement('li')
        li.innerText = new Array(6).fill(indexSum).join('')
        fragment.appendChild(li)
      }
      listDom.appendChild(fragment)
    }, 1000)
  }
  
</script>

</html>

唱一首情歌.

关注

9
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web端中使用vue3 实现移动端的上拉滚动加载功能

原生html 中的滚动我这里也有部分代码我就不详细解释了大家都能看懂的原生html 用的也少了移动端中有封装好的scroll-view 所以就更简单了。这个是vue3 里实现的功能因为是web端一般没有这样的滚动效果既然问题出来了就肯定有解决办法所以就是以上的写法。在这个里面就可以实现滚动的监听滑动到底部就可以知道然后可以实现分页。给这个盒子一个ref 的属性以及有原生滚动事件 scroll。这个盒子里的内容就能立马滚动起来。能够在web端实现滚动分页。
复制链接

扫一扫