События панорамирования в ios 13 ведут себя не так, как ожидалось - PullRequest
Новая
       69

События панорамирования в ios 13 ведут себя не так, как ожидалось

1 голос
/ 07 октября 2019

Я пытаюсь исправить ошибку, которая появляется только на iOS13 с горизонтально прокручиваемой галереей изображений. Мы используем Hammer.js, и пользователи могут правильно провести пальцем влево (чтобы получить следующее изображение), но они не могут надежно провести пальцем вправо (чтобы получить предыдущее изображение). Как я уже сказал, это iOS 13 как для Safari, так и для Chrome.

Я настроил журналы для проверки событий панорамирования, и вот что происходит.

Если вы проведете пальцем влево, deltaX (расстояние по оси X) будет вести себя соответствующим образом - расстояние будет примерно таким, как -11, -22, -41, -58, -68, -84, -101, -114, -124, и мы нажмем на функцию следующего слайда.

Но если вы проведете пальцем вправо, delta-X будет выглядеть примерно так: 21, 27, 42, 67, 88, 102, 124, 138, 142, -61. Этот последний -61 не запускает предыдущую функцию слайда, потому что он слишком мал (мы запускаем предыдущий или следующий, только если панорамирование превышает 1/4 ширины экрана) И это в неправильном направлении, поэтому время от времени переход к предыдущему вызываетследующий слайд!

Я не могу понять, откуда взялась эта случайная последняя цифра. Обычно оно меньше 100 и может быть положительным или отрицательным. И это происходит только при панорамировании вправо. Время от времени (1 из 10 раз) мы не получаем последнее выигрышное число, и смахивание верно работает, но это редко и, похоже, не связано со скоростью или расстоянием.

Код очень прост: 

mc.on('panstart', function(e) {
    //overlay stuff
});

mc.on('pan', function(e) {
    //debounced overlay stuff for prefetching the next slide
});

mc.on('panend pancancel', function(e) {

    if (Math.abs(e.deltaX) > gallery.width / 4) {

        if (e.deltaX < 0) {
            next();
        } else {
            prev();
        }
    } else {
        //do nothing
    }
});
...