эмуляция смахивания в приложении для переключения страниц на мобильном веб-сайте

Недавно меня заинтересовало интересное поведение одного из интерфейсных фреймворков для WeChat (威信).

Если вы посмотрите на https://weui.io/ с включенной панелью инструментов Chrome, а затем выберите элемент внутри список на самой первой странице - вы заметите, что он переносит вас на новую страницу без перезагрузки страницы + новый вид страницы скользит справа налево.

Но самое интересное то, что если вы нажмете кнопку НАЗАД (обычная кнопка «назад» в верхней левой части окна браузера Chrome), вы вернетесь на первую страницу. Кроме того, если вы откроете тот же weui.io на мобильном телефоне, вы сможете выбрать определенный элемент списка, он снова загрузит новую страницу с этим приятным эффектом слайда, а затем вы просто проведете пальцем слева направо, чтобы вернуться на предыдущую страницу. . Таким образом, свайп работает так же, как внутри приложения, что мне очень интересно!

Я хочу создать такое же поведение на своем сайте, но не могу эффективно эмулировать его.

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

Я проверял код, но до сих пор не могу найти части кода, относящиеся к этой конкретной функции.

Кто-нибудь делал что-то подобное, чтобы поделиться опытом? Спасибо за любые мысли!


person Zerus    schedule 16.10.2017    source источник


Ответы (1)


Оказалось все просто: все дело в History API (pushstate + popstate - также есть хорошие CSS-трюки пример для начала).

В любом случае, History API — это то, что помогает вам эмулировать поведение кнопки «назад/вперед», даже когда вы просто делаете это.

$('.some_div').hide() $('.some_other_div').show();

Я нашел этот пост действительно полезен - работает практически "из коробки".

Наконец, поддержку браузера History API можно найти здесь.

Буду рад комментариям, если будут вопросы ;)

person Zerus    schedule 30.10.2017