移动端手指事件

最新推荐文章于 2024-07-26 18:16:53 发布

ヽ错落不堪的年华。

最新推荐文章于 2024-07-26 18:16:53 发布

阅读量185

点赞数

分类专栏：技术交流技术总结前端文章标签： js html

本文链接：https://blog.youkuaiyun.com/qq_44777678/article/details/112530208

版权

技术交流同时被 3 个专栏收录

107 篇文章

订阅专栏

技术总结

103 篇文章

订阅专栏

前端

97 篇文章

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      padding: 10px;
    }

    ul {
      position: fixed;
      top: 10px;
      bottom: 10px;
      left: 10px;
      right: 10px;
      overflow: hidden;
    }

    li {
      height: 100%;
    }

    li:nth-child(odd) {
      background: cadetblue;
    }

    li:nth-child(even) {
      background: chocolate;
    }

    #Load {
      position: absolute;
      width: 100%;
      top: -60px;
      height: 60px;
      background: #eaeaee;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <ul id="dv">
    <div id="Load">
      正在加载...
    </div>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

  <script>

    function add() {
      let dv = document.querySelector('#dv');
      let Load = document.querySelector('#Load')

      // 鼠标点击y坐标 / 鼠标移动坐标
      let position = null;

      // 获取滑动节点的高
      let dvHeight = dv.offsetHeight;

      // 鼠标按下
      dv.addEventListener('touchstart', function (ev) {
        position = ev.touches[0].clientY
      })

      //  手指移动
      dv.addEventListener('touchmove', function (ev) {
        const deltay = ev.touches[0].clientY - position

        this.scrollTop = this.scrollTop - deltay

        // 判断是否是往上滑动
        if (this.scrollTop - deltay < 0 && getCss(this, 'paddingTop') < 70) {
          // 设置偏移量
          this.style.paddingTop = getCss(this, 'paddingTop') + 3 + 'px';
          Load.style.top = getCss(Load, 'top') + 3 + 'px';
        }
        // 设置移动距离
        position = ev.touches[0].clientY;
      })

      // 手指释放
      dv.addEventListener('touchend', function (ev) {
        // 卷曲高度 / 节点高度
        let fixed = (this.scrollTop / dvHeight).toFixed()

        this.scrollTop = dvHeight * fixed;

        // 下拉加载更多
        if (getCss(this, 'paddingTop') >= 70) {
          setTimeout(() => {
            this.style.paddingTop = '0px'
            Load.style.top = '-60px'
          }, 3000)
        } else {
          this.style.paddingTop = '0px'
          Load.style.top = '-60px'
        }

        // 无限节点
        if (document.querySelectorAll('#dv > li').length - fixed <= 3) {
          const li = document.createElement('li');
          li.innerText = document.querySelectorAll('#dv > li').length
          dv.appendChild(li);
        }
      })
    }

    add('dv')

    function getCss(curEle, attr) {
      var val = null, reg = null;
      if ("getComputedStyle" in window) {
        val = window.getComputedStyle(curEle, null)[attr];
      } else {
        if (attr === "opacity") {
          val = curEle.currentStyle["filter"];
          reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
          val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;
        } else {
          val = curEle.currentStyle[attr];
        }
      }
      reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
      return reg.test(val) ? parseFloat(val) : val;
    }

  </script>
</body>

</html>