madimp Jan 10 2013 at 12:57

Touch-web: Swipe

7 min

64K

VK corporate blogJavaScript*Development of mobile applications*

+48

Comments 27

akira Jan 10 2013 at 13:20

Это только для webkit актуально, проверялось на gecko, presto?
Отличная статья! Спасибо!

madimp Jan 10 2013 at 13:39

По большому счету это актуально для всех. За исключением своей модели тач-событий в IE.

akira Jan 10 2013 at 13:42

Спасибо!

hf35 Jan 10 2013 at 13:59

а насколько отличается модель WP IE?

madimp Jan 10 2013 at 14:15

Довольно сильно отличается. От самих событий (например, у IE есть MSGestureTap и MSPointerHover) до данных в объекте события.
Как всегда заточено под Windows.
Подробнее почитать можно здесь.
Поддерживается, начиная с IE10

alaevka Jan 10 2013 at 15:22

Как всегда, IE впереди всей планеты.

spbcypher Jan 10 2013 at 14:06

>> лидер команды разработки главной страницы Mail.Ru
Сорри за оффтоп, но если не секрет, сколько вас трудится над ней?

AndrewSumin Jan 10 2013 at 14:11

Если интересуют именно frontend разработчики то двое.
Егор по совместительству frontend разработчик.

Команда в целом сильно варируется от текущих задач.

PoN Jan 10 2013 at 16:07

Да, статья отличная, такое решение можно портировать и на другие платформы.

ssneg Jan 10 2013 at 16:35

На фразе «Но некоторые браузеры на touch-устройствах — например, WP IE — не поддерживают эти события» зубы сами собой скрипнули, а на глаза навернулись слёзы от бессилия. Ну как! Опять! 21-й век же! Тач! Windows Phone! Нет же никаких оправданий в стиле «это для совместимости с IE 3.0 в Win 3.11 для рабочих групп»!

ssneg Jan 10 2013 at 16:36

В-четвертых, реагировать на касание только первым пальцем

Было бы красиво реагировать на касание 2 (и более) пальцами, переходя сразу в начало или сразу в конец, в зависимости от направления жеста.

madimp Jan 10 2013 at 17:21

Интересный ход. Возьмем на заметку.

wa_Nadoo Jan 10 2013 at 20:08

>> Этим постом мы продолжаем серию статей на тему разработки веб-интерфейсов для touch-устройств.

Почему-то не получилось найти предыдущие статьи серии)

madimp Jan 10 2013 at 20:33

Промашечка вышла. Имелась ввиду серия статей о разработке мобильных веб-интерфейсов в целом. В частности, для touch-устройств.

saymanski Jan 10 2013 at 21:43

blog.kojo.com.au/flickable-zepto-plugin/

Плагин для Zepto, выполняющий аналогичную функцию.

vermilion1 Jan 10 2013 at 21:54

Всегда приятно реализировать функционал самому :)
К тому же чрезмерное использование чревато последствиями

saymanski Jan 10 2013 at 22:01

Это для тех, кому не так приятно писать своё :)

AndrewSumin Jan 10 2013 at 22:34

Пост про меанику работы с тач устройствами на примере реальной задачи.
Интересен тем кто любит копать глубоко и понимать что происходит у него на проекте.

madimp Jan 10 2013 at 22:41

Неплохо слайдится. Но. Попробуйте проскроллить, например, первую демку по вертикали, начав движение касанием кастомизированного блока.
Не получится. Будет пытаться перелистнуть карточку.
Представьте себе страницу с такими блоками на всю ширину и без больших отступов между ними. Epic fail надо сказать.
Именно по-этому пишутся свои решения. Как говориться, «хочешь сделать ~~хорошо~~ то, что надо...»
Не без приключений и багов, конечно.

saymanski Jan 10 2013 at 23:54

У плагина есть некоторые настройки. Вроде flickDirection и preventDefault должны решить проблему скролла. Точно не помню. Я как раз боролся ровно с обратной проблемой, чтобы вертикального скролла не было :)

madimp Jan 10 2013 at 23:59

Хорошо, если так.
Но смысл моего посыла, я думаю, все равно проглядывается :)

saymanski Jan 11 2013 at 00:10

Да, посыл-то понятен, но т.к. пост без ссылок, то может показаться, что существующие решения не рассматривались :)
Кстати, у вас работает хорошо, кроме, пожалуй, этого «странного» эффекта с запаздывающим заголовком )

madimp Jan 11 2013 at 00:17

Изначально запаздывания не было. Но Samsung сделал подарок. У него в Galaxy S III (к сожалению, не помню в какой версии прошивки) при паралелльных анимациях (перелистывание страницы и прокрутка табов/заголовков) половина страницы попросту скрывалась на время анимации. Потому разнесли по времени.
Надо будет перепроверить на досуге, вдруг поправили в каком из обновлений.

noise Jun 14 2013 at 11:19

пробовал я его настраивать, толку особенно нет. при скроллинге контент всёравно дергается. пытается перелистнуть.

в итоге — закомментировал кусок самого плагина (метода move частично).

vitaly44 Jan 14 2013 at 04:14

А я не понял где это работает… Какой урл? С сайта главного на новости и мобильная версия — не то совсем

madimp Jan 14 2013 at 11:41

mail.ru с touch-смартфона (Android, iOS, etc), блоки с погодой и новостями.

Gromo May 21 2014 at 16:47

При исследовании на iPad-е, свойство event.changedTouches не является массивом, поэтому event.changedTouches.indexOf(touch) не работает. Приходится сравнивать напрямую event.changedTouches[0] === touch.