iscroll和hammer

下载

手势滑动库

iscroll

手势缩放库

hammer

iscroll

拖拽

iscroll.html

  • bounce: false是否允许拖过了
  • scrollX: true 左右拖拽
  • scrollY: true 上下拖拽
  • freeScroll: true自由拖拽
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="iscroll.js" charset="utf-8"></script>
  <style media="screen">
    .parent {
      width: 300px;
      height: 400px;
      border: 1px solid black;
      margin: 50px auto 0;
      overflow: hidden;
    }

    .parent .child {
      width: 600px;
    }
  </style>
  <script>
    window.onload = function () {
      let scroll = new IScroll('.parent', {
        // 是否允许拖过了
        //bounce: false 
        bounceTime: 300,
        // 左右拖拽
        scrollX: true,
        scrollY: true,
        // 自由拖拽
        freeScroll: true,
      });
      console.log(scroll)
    };
  </script>
</head>

<body>
  <div class="parent">
    <div class="child">
      <p>2018年3月8日,鲁检君跟随山东省人民检察院公诉二处检察官程才和汤宁,前往“德州大学生遇害案”二审上诉庭审的现场,为您还原案件真相,揭秘背后的故事。</p>
      <p>案发</p>

      <p>
        2016年10月25日晚,德州市民的朋友圈里疯传着一段视频,视频显示,在一片混乱中,两名年轻男子浑身是血、不省人事,被先后抬上救护车。据当时网友爆料,这是发生在德州某高校商业街的一起伤人事件,受伤的是两名20岁左右的大二学生,送医后经抢救无效死亡。
      </p>

      <p>大学城内?年轻男子?杀人事件?这些敏感的关键词挑动着人们的神经。一时间,学生、老师、家长人心惶惶,各种揣测四起。而找到犯罪嫌疑人,是突破案件的关键。</p>

      <p>根据当时一位目击者捡到的一部遗落在现场的手机,警方很快锁定了犯罪嫌疑人费某亮。当晚23时许,在德州市人民医院住院部一部,犯罪嫌疑人费某亮被公安机关抓获。很快,费某亮因涉嫌犯故意杀人罪被批准逮捕。</p>

      <p>次年3月6日,德州市人民检察院以费某亮涉嫌故意杀人罪向德州市中级人民法院提起公诉。6月22日,德州市中级人民法院作出刑事判决书,被告人费某亮犯故意杀人罪,判处死刑,剥夺政治权利终身。费某亮不服,提出上诉。</p>

      <p>
        山东省检察院公诉二处的两名检察官程才和汤宁就是在此时接手此案。虽然相较其他恶性案件,本案的案情并不复杂,但青春少年,本该是人生最得意的阶段,2名20岁出头的小伙子却落得如此结果,给家人留下了无法承受的伤痛,实在让人深感痛心和惋惜。
      </p>
    </div>
  </div>
</body>

</html>

控制台

1567151739605

下拉刷新和加载更多

iscroll2.html

probeType——探测优先级

  • 1 低 定时探测
  • 2 中 实时检测用户拖拽
  • 3 高 实时检测用户拖拽+实时检测运动本身 自动禁用transition
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="iscroll.js" charset="utf-8"></script>
  <style media="screen">
    .parent {
      width: 300px;
      height: 400px;
      border: 1px solid black;
      margin: 50px auto 0;
      overflow: hidden;
      position: relative;
    }

    .parent .child {
      width: 300px;
      background: #FFF;
      position: relative;
      z-index: 999;
      overflow: hidden;
    }

    .parent .dropdown {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      text-align: center;
      line-height: 40px;
    }

    .parent .loadmore {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
      line-height: 40px;
    }
  </style>
  <script>
    window.onload = function () {
      let scroll = new IScroll('.parent', {
        scrollY: true,
        probeType: 1
      });

      scroll.on('scroll', function () {
        console.log(scroll.y);
      });
    };
  </script>
</head>

<body>
  <div class="parent">
    <div class="child">
      <p>2018年3月8日,鲁检君跟随山东省人民检察院公诉二处检察官程才和汤宁,前往“德州大学生遇害案”二审上诉庭审的现场,为您还原案件真相,揭秘背后的故事。</p>
      <p>案发</p>

      <p>
        2016年10月25日晚,德州市民的朋友圈里疯传着一段视频,视频显示,在一片混乱中,两名年轻男子浑身是血、不省人事,被先后抬上救护车。据当时网友爆料,这是发生在德州某高校商业街的一起伤人事件,受伤的是两名20岁左右的大二学生,送医后经抢救无效死亡。
      </p>

      <p>大学城内?年轻男子?杀人事件?这些敏感的关键词挑动着人们的神经。一时间,学生、老师、家长人心惶惶,各种揣测四起。而找到犯罪嫌疑人,是突破案件的关键。</p>

      <p>根据当时一位目击者捡到的一部遗落在现场的手机,警方很快锁定了犯罪嫌疑人费某亮。当晚23时许,在德州市人民医院住院部一部,犯罪嫌疑人费某亮被公安机关抓获。很快,费某亮因涉嫌犯故意杀人罪被批准逮捕。</p>

      <p>次年3月6日,德州市人民检察院以费某亮涉嫌故意杀人罪向德州市中级人民法院提起公诉。6月22日,德州市中级人民法院作出刑事判决书,被告人费某亮犯故意杀人罪,判处死刑,剥夺政治权利终身。费某亮不服,提出上诉。</p>

      <p>
        山东省检察院公诉二处的两名检察官程才和汤宁就是在此时接手此案。虽然相较其他恶性案件,本案的案情并不复杂,但青春少年,本该是人生最得意的阶段,2名20岁出头的小伙子却落得如此结果,给家人留下了无法承受的伤痛,实在让人深感痛心和惋惜。
      </p>
    </div>
    <div class="dropdown">下拉刷新</div>
    <div class="loadmore">加载更多</div>
  </div>
</body>

</html>

松手刷新和松手加载

iscroll3.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="iscroll-probe.js" charset="utf-8"></script>
  <style media="screen">
    .parent {
      width: 300px;
      height: 400px;
      border: 1px solid black;
      margin: 50px auto 0;
      overflow: hidden;
      position: relative;
    }

    .parent .child {
      width: 300px;
      background: #FFF;
      position: relative;
      z-index: 999;
      overflow: hidden;
    }

    .parent .dropdown {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      text-align: center;
      line-height: 40px;
    }

    .parent .loadmore {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
      line-height: 40px;
    }
  </style>
  <script>
    window.onload = function () {
      let oDropDown = document.getElementsByClassName('dropdown')[0];
      let oLoadMore = document.getElementsByClassName('loadmore')[0];
      let oParent = document.getElementsByClassName('parent')[0];
      let oChild = document.getElementsByClassName('child')[0];

      let scroll = new IScroll('.parent', {
        scrollY: true,
        probeType: 3
      });

      scroll.on('scroll', function () {
        console.log(scroll.y)
        if (scroll.y >= 50) {
          oDropDown.innerHTML = '松手刷新';
        } else {
          oDropDown.innerHTML = '下拉刷新';
        }

        if (-scroll.y - (oChild.offsetHeight - oParent.offsetHeight) >= 50) {
          oLoadMore.innerHTML = '松手加载';
        } else {
          oLoadMore.innerHTML = '加载更多';
        }
      });
    };
  </script>
</head>

<body>
  <div class="parent">
    <div class="child">
      <p>2018年3月8日,鲁检君跟随山东省人民检察院公诉二处检察官程才和汤宁,前往“德州大学生遇害案”二审上诉庭审的现场,为您还原案件真相,揭秘背后的故事。</p>
      <p>案发</p>

      <p>
        2016年10月25日晚,德州市民的朋友圈里疯传着一段视频,视频显示,在一片混乱中,两名年轻男子浑身是血、不省人事,被先后抬上救护车。据当时网友爆料,这是发生在德州某高校商业街的一起伤人事件,受伤的是两名20岁左右的大二学生,送医后经抢救无效死亡。
      </p>

      <p>大学城内?年轻男子?杀人事件?这些敏感的关键词挑动着人们的神经。一时间,学生、老师、家长人心惶惶,各种揣测四起。而找到犯罪嫌疑人,是突破案件的关键。</p>

      <p>根据当时一位目击者捡到的一部遗落在现场的手机,警方很快锁定了犯罪嫌疑人费某亮。当晚23时许,在德州市人民医院住院部一部,犯罪嫌疑人费某亮被公安机关抓获。很快,费某亮因涉嫌犯故意杀人罪被批准逮捕。</p>

      <p>次年3月6日,德州市人民检察院以费某亮涉嫌故意杀人罪向德州市中级人民法院提起公诉。6月22日,德州市中级人民法院作出刑事判决书,被告人费某亮犯故意杀人罪,判处死刑,剥夺政治权利终身。费某亮不服,提出上诉。</p>

      <p>
        山东省检察院公诉二处的两名检察官程才和汤宁就是在此时接手此案。虽然相较其他恶性案件,本案的案情并不复杂,但青春少年,本该是人生最得意的阶段,2名20岁出头的小伙子却落得如此结果,给家人留下了无法承受的伤痛,实在让人深感痛心和惋惜。
      </p>
    </div>
    <div class="dropdown">下拉刷新</div>
    <div class="loadmore">加载更多</div>
  </div>
</body>

</html>

hammer

手势轻点触摸

tap点击,轻点,快250ms内,按下+抬起 click有延迟(250ms)

hammer.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      width: 400px;
      height: 400px;
      background: #CCC;
      margin: 100px auto 0;
    }
  </style>
  <script src="hammer.js" charset="utf-8"></script>
  <script>
    window.onload = function () {
      let oBox = document.querySelector('.box');

      let hammer = new Hammer(oBox);

      hammer.on('tap', ev => {
        console.log(ev.center.x, ev.center.y);
      });
    };
  </script>
</head>

<body>
  <div class="box"></div>
</body>

</html>

手势长点触摸

press 点击,长点,超过250ms

hammer2.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      width: 400px;
      height: 400px;
      background: #CCC;
      margin: 100px auto 0;
    }
  </style>
  <script src="hammer.js" charset="utf-8"></script>
  <script>
    window.onload = function () {
      let oBox = document.querySelector('.box');

      let hammer = new Hammer(oBox);

      hammer.on('tap', ev => {
        console.log('tap');
      });
      hammer.on('press', ev => {
        console.log('press');
      });
    };
  </script>
</head>

<body>
  <div class="box"></div>
</body>

</html>

手势快速滑动触摸

swipe快速-滑动,速度超过300px/s

hammer3.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      width: 400px;
      height: 400px;
      background: #CCC;
      margin: 100px auto 0;
    }
  </style>
  <script src="hammer.js" charset="utf-8"></script>
  <script>
    window.onload = function () {
      let oBox = document.querySelector('.box');

      let hammer = new Hammer(oBox);

      hammer.on('swipeleft', ev => {
        console.log('left');
      });
      hammer.on('swiperight', ev => {
        console.log('right');
      });
      hammer.on('swipeup', ev => {
        console.log('up');
      });
      hammer.on('swipedown', ev => {
        console.log('down');
      });
    };
  </script>
</head>

<body>
  <div class="box"></div>
</body>

</html>

短信列表滑动删除.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
      list-style: none
    }

    #sms_list {
      width: 100%;
    }

    #sms_list li {
      width: 100%;
      position: relative;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #333;
      transition: 0.6s all ease;
      overflow: hidden;
    }

    #sms_list li a.btn-del {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 0px;
      text-align: center;
      line-height: 30px;
      background: #F00;
      color: white;
      text-decoration: none;
      transition: 0.3s all ease;
      overflow: hidden;
    }

    #sms_list li a.btn-del span {
      width: 80px;
      display: block;
    }
  </style>
  <script src="hammer.js" charset="utf-8"></script>
  <script>
    window.onload = function () {
      const sms = [
        'asdfsdfbxf多个人头是让他',
        'sdydthdfghfghdfg',
        'asdfsdfbxf多个人头是让他',
        'fhdfghdtfyu',
        'asdfsdfbxf多个人头是让他',
        'vnmvnmbnm',
        'asdfsdfbxf多个人头是让他',
      ];
      let oUl = document.getElementById('sms_list');
      let aBtnDel = document.getElementsByClassName('btn-del');

      sms.forEach(txt => {
        let oLi = document.createElement('li');
        oLi.innerHTML = `<span>${txt}</span><a href="javascript:;" class="btn-del"><span>删除</span></a>`;

        oUl.appendChild(oLi);

        //
        let hammer = new Hammer(oLi);

        let oBtnDel = oLi.getElementsByTagName('a')[0];
        hammer.on('swipeleft', function () {
          Array.from(aBtnDel).forEach(btn => {
            btn.style.width = '0px';
          });

          oBtnDel.style.width = '80px';
        });
        hammer.on('swiperight', function () {
          oBtnDel.style.width = '0px';
        });

        oBtnDel.onclick = function () {
          oBtnDel.style.width = '0px';

          oBtnDel.addEventListener('transitionend', function (ev) {
            oLi.style.height = '0px';
            oLi.style.borderBottom = '0px solid #333';

            ev.cancelBubble = true;

            oLi.addEventListener('transitionend', function () {
              oUl.removeChild(oLi);
            });
          }, false);
        };
      });
    };
  </script>
</head>

<body>
  <ul id="sms_list"></ul>
</body>

</html>

手势长时间滑动触摸

pan 滑动

hammer4.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      width: 400px;
      height: 400px;
      background: #CCC;
      margin: 100px auto 0;
    }
  </style>
  <script src="hammer.js" charset="utf-8"></script>
  <script>
    window.onload = function () {
      let oBox = document.querySelector('.box');

      let hammer = new Hammer(oBox);

      hammer.on('swipeleft', ev => {
        console.log('swipe left');
      });

      hammer.on('swiperight', ev => {
        console.log('swipe right');
      });

      hammer.on('panleft', ev => {
        console.log('pan left');
      });

      hammer.on('panright', ev => {
        console.log('pan right');
      });
    };
  </script>
</head>

<body>
  <div class="box"></div>
</body>

</html>

hammer5.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      width: 400px;
      height: 400px;
      background: #CCC;
      margin: 100px auto 0;
    }
  </style>
  <script src="hammer.js" charset="utf-8"></script>
  <script>
    window.onload = function () {
      let oBox = document.querySelector('.box');

      let hammer = new Hammer(oBox);

      hammer.on('panstart', ev => {
        console.log('panstart');
      });
      hammer.on('panmove', ev => {
        console.log('panmove');
      });
      hammer.on('panend', ev => {
        console.log('panend');
      });
      hammer.on('pancancel', ev => {
        console.log('pancancel');
      });
    };
  </script>
</head>

<body>
  <div class="box"></div>
</body>

</html>

手势旋转

hammer6.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      width: 400px;
      height: 400px;
      background: #CCC;
      margin: 100px auto 0;
    }
  </style>
  <script src="hammer.js" charset="utf-8"></script>
  <script>
    window.onload = function () {
      let oBox = document.querySelector('.box');

      let hammer = new Hammer(oBox);

      /*
      let config=hammer.get('rotate');
      config.set({enable: true});
      */

      hammer.get('rotate').set({ enable: true });
      hammer.on('rotatestart', ev => { });
      hammer.on('rotatemove', ev => {
        //console.log(ev.rotation);       //旋转的角度
        oBox.style.transfrom = `rotate(${ev.rotation}deg)`;
      });
      hammer.on('rotateend', ev => { });
    };
  </script>
</head>

<body>
  <div class="box"></div>
</body>

</html>

连续旋转

hammer7.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      width: 400px;
      height: 400px;
      background: #CCC;
      margin: 100px auto 0;
    }
  </style>
  <script src="hammer.js" charset="utf-8"></script>
  <script>
    window.onload = function () {
      let oBox = document.querySelector('.box');
      let deg = 0, old_deg;

      let hammer = new Hammer(oBox);

      hammer.get('rotate').set({ enable: true });
      hammer.on('rotatestart', ev => {
        old_deg = deg;
      });
      hammer.on('rotatemove', ev => {
        deg = old_deg + ev.rotation;

        oBox.style.transfrom = `rotate(${deg}deg)`;
      });
      hammer.on('rotateend', ev => { });
    };
  </script>
</head>

<body>
  <div class="box"></div>
</body>

</html>

手势缩放

hammer8.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      width: 400px;
      height: 400px;
      background: #CCC;
      margin: 100px auto 0;
    }
  </style>
  <script src="hammer.js" charset="utf-8"></script>
  <script>
    window.onload = function () {
      let oBox = document.querySelector('.box');
      let scale = 0, old_scale;

      let hammer = new Hammer(oBox);

      hammer.get('pinch').set({ enable: true });
      hammer.on('pinchstart', ev => {
        old_scale = scale;
      });
      hammer.on('pinchmove', ev => {
        scale = old_scale * ev.scale;

        oBox.style.transform = `scale(${scale})`;
      });
      hammer.on('pinchend', ev => { });
    };
  </script>
</head>

<body>
  <div class="box"></div>
</body>

</html>

手势点击不放字掉下去.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      width: 200px;
      height: 20px;
      border: 1px solid black;
      overflow: hidden;
      transition: 6s all ease;
    }

    .box:active {
      width: 0;
    }

    .box span {
      width: 200px;
      display: block;
    }
  </style>
</head>

<body>
  <div class="box">
    <span>电风扇地方色天然色管</span>
  </div>
</body>

</html>

  目录