iscroll和hammer手势

iscroll滚动

使用

    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            overflow: hidden;
        }
        li{
            width: 200px;
            height: 40px;
        }
    </style>
    <script src="/js/iscroll.js"></script>
    <div class="box">
        <ul>
            <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>0</li>
        </ul>
    </div>
    <script>
        window.onload=function(){
            let iScroll= new IScroll('.box',{
              bounce:false,//禁止拖动超过盒子大小
                bounceTime:600,//拖动超过盒子大小的时间
                scrollX:true,//拖动的方向
                scrollY:false,//拖动的方向
            });
        console.log(iScroll);
        }
       
    </script>

一些常用的参数

字段	默认值	含义
bounce	false	禁止拖动超过盒子大小
bounceTime	600	拖动超过盒子大小的时间
scrollX scrollY	默认x为false,y为true	拖动的方向
freeScroll		是否允许自由拖动，斜着拖动
probeType	1/2/3	探测优先级

操控的是第一个子元素

上拉、下拉

可以对scroll进行监听，到多少刷新

 scroll.on('scroll',function(){
                console.log(scroll.y);
   })

hammer

1.简介

移动端手势库、

支持单点、多点、触摸多种手势

初始化

 let box = document.querySelector('.box')
 let hammer =new Hammer(box)
        hammer.on('tap',ev=>{
            console.log(ev.center.x,ev.center.y);
            console.log(ev);
        })

2.常用的手势

2.1 tap

指定的DOM区域内，轻拍或点击

2.2 press

长按，超过250ms。 可以用于复制

2.3swipe

快速滑动

有四种

• swipeleft: 向左滑动
• swiperight: 向右滑动
• swipeup: 向上滑动
• swipedown: 向下滑动

2.4 pan

慢速滑动

• panstart: 拖动开始
• panmove: 拖动过程
• panend: 拖动结束
• pancancel: 拖动取消
• panleft: 向左拖动
• panright: 向右拖动
• panup: 向上拖动
• pandown: 向下拖动

2.5 rotate

旋转

• rotatestart: 旋转开始

• rotatemove: 旋转过程

• rotateend: 旋转结束

• rotatecancel: 旋转取消

  因为性能原因，这个需要引入

 let config= hammer.get('rotate')
       config.set({enabled: true})
  hammer.on('rotatemove', ev => {
            console.log(ev.rotation);//单位是角度
        })

2.6 pinch

缩放

• pinchstart: 多点触控开始
• pinchmove: 多点触控过程
• pinchend: 多点触控结束
• pinchcancel: 多点触控取消
• pinchin: 多点触控时两手指越来越近
• pinchout: 多点触控时两手指越来越远

因为性能原因，这个需要引入

        let config = hammer.get('pinch')
        config.set({ enabled: true })
        hammer.on('pinchmove', ev => {
            console.log(ev.scale);
        })

默认的 pan 仅支持水平方向，可以选择启用全部方向，swipe 也可以启用垂直方向

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });