Имитация прокрутки iOS между вкладками с помощью Javascript

Question

Я пытаюсь найти метод или плагин, который будет воспроизводить эффект в приложении для iOS, где вы можете скользить слева или справа, и он будет блокироваться на следующей панели, когда вы поднимите палец, если вы достаточно скользили в этом направлении.

Как узнать, когда вы достаточно прокрутили, а затем установить новую позицию, чтобы сосредоточиться? Есть ли хороший плагин jQuery для такого рода вещей? JQuery Mobile, похоже, не имеет такой функции.

Макет, который я имею в виду, похож на 4-5 DIVS рядом друг с другом внутри одного DIV с возможностью перепрограммирования для скрытого. Затем, когда вы начинаете скользить к следующей панели, он может запустить событие, которое изменяет левую / правую позицию CSS с некоторым эффектом перехода, а затем также обновить вкладку, чтобы показать, что выбрана новая новая панель.

Answer 1

Вы должны использовать события touchstart/mousedown,touchmove/mousemove и touchend/mouseup для этой цели, чтобы поддерживать как сенсорные, так и настольные устройства.

• При сенсорном запуске используйте объект JQueryEventType для хранения начальных координат X и Y, а также установите некоторый параметр для обозначения действительного пролистывания (скажем, init = true)
• При сенсорном перемещении сначала проверьте, является ли это допустимым пролистыванием (если init == true), затем снова используйте объект JQueryEventType, чтобы получить новые координаты X и Y курсора / пальца.

Теперь самое сложное: используйте эти новые координаты X и Y для расчета смещения и направления. Используйте эти значения, чтобы установить смещение ваших DIV или CSS 3.0 translate(x,y).

Например, если дельта X> 10 (некоторое пороговое значение для фильтрации ошибок) и дельта Y ~ 0, то ее движение вправо. Я бы перевел все мои DIVs в ПРАВО дельта X.

Я бы предложил не использовать анимацию, потому что она не будет выглядеть в соответствии с вашими потребностями. Кроме того, задержка перехода должна быть очень короткой, и, вероятно, нет функции синхронизации Это даст некоторые четкие рефлексы на движение.

Что касается проблемы того, когда предполагать "его достаточно скользко", я думаю, вам придется принять постоянное значение по вашему выбору или рассчитать его, используя ширину экрана. Если дельта X или дельта Y не меньше порогового значения удержания... отскок назад. Если оно больше этого значения... отскок вперед.