hammer版本2.08问题描述:
想实现滑动门效果.....
向左/右拖动图片,拖曳图片的时候,图片跟着手指移动(pan),,当松开的时候,滑动到下一张图片(swipe).
但是,在滑动到下一张图片后,又产生了一次pan事件...
最终效果就是,滑动到下一张图片后,图片又偏移了一段距离..
这种手势冲突的问题怎么解决呢?
    html,body, ul, li, img {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    ul {
        list-style: none;
    }
    ul.animation {
        transition: transform 1s;
    }
    li {
        float: left;
    }
    img {
        width: 100%;
    }    <ul>
        <li><img src="/img/1.jpg" alt="1"></li>
        <li><img src="/img/2.jpg" alt="2"></li>
        <li><img src="/img/3.jpg" alt="3"></li>
        <li><img src="/img/4.jpg" alt="4"></li>
        <li><img src="/img/5.jpg" alt="5"></li>
    </ul>    var App = function() {
        var lis = document.querySelectorAll('li');
        var ul = document.querySelector('ul');
        var index = 0;
        //设置ul,li宽度
        var setWidth = function() {
            lis.forEach(function(li) {
                li.style.width = window.innerWidth + 'px';
            })
            ul.style.width = window.innerWidth * 5 + 'px';
        };
        this.initial = function() {
            window.onload = setWidth;
            window.addEventListener('onorientationchange', setWidth);
        };
        //显示指定li
        var showLi = function(i) {
            if (!ul.classList.contains('animation')) {
                ul.classList.add('animation');
            }
            //循环
            //            index = index > (lis.length - 1) ? 0 : index < 0 ? lis.length - 1 : index;
            //不循环
            index += i;
            index = Math.max(Math.min(lis.length - 1, index), 0);
            var offset = -index * window.innerWidth + 'px';
            ul.style.transform = 'translate(' + offset + ',0)';
        };
        //画面跟随移动
        var followFinger = function(e) {        };
        var handlerMove = function(e) {
            switch (e.type) {
                case "swipeleft":
                    showLi(1);
                    break;
                case "swiperight":
                    showLi(-1);
                    break;
                case "panleft":
                case "panright":
                    if (ul.classList.contains('animation')) {
                        ul.classList.remove('animation');
                    }
                    var offsetWidth = -window.innerWidth*index;
                    ul.style.transform = 'translate('+(offsetWidth+e.deltaX)+'px,0)';
                    break;
            }
            console.log(e.type);
        }
        //触摸事件
        var hammertime = new Hammer(ul);
        hammertime.on('swipeleft swiperight panleft panright', handlerMove);
    };
    var xx = new App();
    xx.initial();