[js]hammer.js手势冲突问题

冉娃娃 2017-12-04 12:43:45

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();