原生JS实现下拉刷新（移动端）

最新推荐文章于 2024-02-15 09:15:57 发布

LLtaishuai

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量878

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_42539854/article/details/124064357

版权

前端 javascript

前端基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原生JS实现下拉刷新（移动端）

主要利用touchstart、touchmove、touchend事件
结合CSS定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .box {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .list {
    position: relative;
    top: 0;
    width: 100%;
  }
  .list li {
    list-style-type: none;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
  }
</style>
<body>
  <div class="box">
    <ul class="list">
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
      <li>4444</li>
    </ul>
  </div>
  <script>
    /* 
    e.touches： touchlist触摸点列表, 存储着触摸点对象touch
    */
    const box = document.querySelector('.box')
    const list = document.querySelector('.list')
    // 按下屏幕的位置
    let touchStartPosition = 0
   
    // touchstart事件
    box.addEventListener('touchstart', function (e) {
      let touch = e.touches[0]
      touchStartPosition = touch.pageY
      // console.log(touchStartPosition)
    })
    // touchmove事件
    box.addEventListener('touchmove', function (e) {
      let touch = e.touches[0]
      // 列表的top值等于列表相对于box的偏移量+滑动的距离
      list.style.top = list.offsetTop + touch.pageY - touchStartPosition + 'px'
      // 实现平滑的滑动
      touchStartPosition = touch.pageY
    })
    // touchend事件
    box.addEventListener('touchend', function (e) {
      let top = list.offsetTop
      if (top > 70) {
        // 在此处调用刷新后的回调
        console.log('刷新')
      } 
      if (top > 0) {
        // 通过定时器平滑的将list的top = 0
        let timer = setInterval(() => {
          list.style.top = top-- + 'px'
          if (top <= 0) {
            clearInterval(timer)
          }
        })
      }
    })
  </script>
</body>
</html>