iscroll和hammer/transitionend事件/p

移动端常用库

iscroll控制滚动

    //1.引入iscroll.js
    <script src="iscroll.js" charset="utf-8"></script>
    //2.创建父级元素、子级元素   
    <div class="parent">
        <div class="child">
        </div>
    </div>
    //3.创建iscroll对象,参数1为父级元素,参数2为option配置,不填即为默认
    //  创建iscroll对象之后，移动端即可实现第一个子级元素可拖动
     let scroll=new IScroll('.parent', {
        bounce: false, //是否允许拖动超出范围.
        bounceTime: 300, //拖动超出范围之后返回原位置的时间(毫秒)
        scrollX:    true,//横向拖拽
        scrollY:    true,//纵向拖拽
        freeScroll: true,//随便拖拽
        probeType:3,//探测优先级,1-3 由低到高,1:定时探测用户拖拽,2:实时探测用户拖拽,3:实时探测用户拖拽+实时检测运动本身(此级别会自动禁用transition),想要使用probeType属性时,需要把iscroll.js换成iscroll-probe.js,否则不支持probeType属性;
      });
    //监听拖动事件时的Y轴
      scroll.on('scroll',function(){console.log(scroll.y)});
    //scroll 事件
        beforeScrollStart  手指按下事件
        scrollStart 第一次移动
        scroll 滚动中
        scrollEnd 手指抬起事件
        scrollCancel 手指按下,抬起,没有移动
    scrollEnd 事件是所有运动结束之后才触发,
    所以此处使用touchend事件来监听手指松开.
        oParent.addEventListener('touchend', function(){
            scroll.disable();//禁用滚动,可以将滚动停止在触发时的位置
            //此处操作手指松开之后,运动结束之前的行为
        }, false);

hammer控制手势

     //1.引入hammer.js
    <script src="hammer.js" charset="utf-8"></script>
    //2.创建hammer对象
     var oBox = document.querySelector('.box')
     let hammer=new Hammer(oBox);
     //移动端点击事件用click的话,在移动端会有延迟,

    //hammer 事件
        短时间点击事件 tap,短时间点击触发
        长时间点击事件 press,长时间点击触发
        快速滑动事件(超过300px/s触发) swipe,swipeleft,swiperight,swipetop,swipedown
        滑动事件 pan,panleft,panright,pantop,pandown
                panstart,panmove,panend,pancancel
        hammer.on('tap',ev=>{
            console.log(ev.center.x,ev.center.y);//手指坐标
        })

    //hammer做旋转功能
        //hammer获取rotate,并且设置成可用,
        var deg = 0,odeg;//设置初始角度为0,以及创建保留旧角度的变量
        let config = hammer.get('rotate');
        config.set({enable:true});
        //设置之后即可使用rotate事件
        hammer.on('rotatestart',ev=>{
            odeg=deg;//开始时保留旧角度
        });
        hammer.on('rotatemove',ev=>{
            deg = ev.rotation+odeg;//获取转动的角度,解决用户多次转动
            oBox.style.transfrom = `rotate(${deg}deg)`;//旋转功能
        });
        hammer.on('rotateend',ev=>{});

    //hammer做缩放功能(注释如上)
        hammer.get('pinch').set({enable: true});
        hammer.on('pinchstart', ev=>{
            ld_scale=scale;
        });
        hammer.on('pinchmove', ev=>{
            scale=old_scale*ev.scale;
            oBox.style.transform=`scale(${scale})`;
        });
        hammer.on('pinchend', ev=>{});

扩展

hammer小实战(见3-13.zip 3-15zip-->短信列表.html)
    移动端短信列表删除动画制作
transitionend事件,transition事件结束后触发
    作用是可以让移动端动画依次触发
    function fnEnd(){
        console('事件触发');
        oBtnDel.style.transition='none';//通常在此处要把transition取消掉,否则事件就会多次加载越来越卡;
        oBtnDel.removeEventListener('transitionend', fnEnd, false);//移除绑定事件
    }
    oBtnDel.addEventListener('transitionend', fnEnd, false);//添加绑定事件
pan事件与swipe事件
    pan事件是一个过程
    swipe事件是一个结果
    所以通常更多使用start\move\end事件