Возврат метода реализации на странице Html5

Когда вы видите это название, вы можете подумать, что это, черт возьми? На самом деле я хочу вот что сказать, посмотрите запись ниже:

Этот вид взаимодействия часто встречается на страницах H5. Нажмите на город -> откройте плавающий слой выбора города -> нажмите кнопку возврата, чтобы закрыть плавающий слой.

Эти операции можно выполнить, не нажимая кнопку закрытия в верхнем левом/верхнем правом углу. У Fliggy's H5 есть всплывающий слой при движении вперед, и всплывающий слой закрывается при возврате. Это не работает для других компаний ( Авиабилеты Qunar.com H5, отель Meituan H5).

Поскольку H5 управляется на мобильном телефоне, зона покрытия области, управляемой пальцем на мобильном телефоне, очень мала, не говоря уже о зонах мертвого пространства (отмена/закрытие) в верхнем левом/верхнем правом углу. Вы наверняка слышали это действие: нажмите, чтобы вернуться назад. Это очень удобно и удобно для пользователей. После выбора города нет необходимости нажимать «Отмена». Просто нажмите «Возврат», где можно использовать большой палец, чтобы закрыть всплывающий слой.

Поскольку такой очень хороший спрос, вы как разработчик обязательно приложите все усилия, чтобы реализовать эту функцию. Вам даже не нужно гуглить, вы сможете придумать такие методы, как History.back(), History.go(). Однако думать об этом по-прежнему бесполезно. Теоретически возврат/пересылка браузера/веб-просмотра требует перезагрузки страницы, поскольку URL-адрес изменился. Если вы действительно разбираетесь в одностраничных приложениях (SPA) или используете React/Vue, вы должны знать, что существует нечто, называемое маршрутизацией. Эти изменения URL-адресов, которые меняют хеш и не могут быть обновлены, представляют собой функции истории, добавленные в HTML5.

интерфейс истории

 История интерфейса {атрибут только для чтения без знака, атрибут ScrollRestoration; атрибут только для чтения любое состояние; void go (необязательный long delta = 0); void pushState (любые данные, заголовок DOMString? url = null); void replaceState (любые данные, заголовок DOMString, необязательный DOMString? url = null);};

1. pushState
2. заменитьстате

Есть еще одно событие

1. onpopstate

pushState, replaceState используются для изменения порядка стека истории, onpopstate срабатывает при возврате и движении вперед.

То же самое относится и к реализации в vue-router (строка 1694).

Теперь, когда мы так много сказали, давайте посмотрим, как реализовать эту функцию.

Давайте посмотрим на совместимость pushState и replaceState.

Он полностью зеленый и его гораздо безопаснее использовать.

Идея:

1. PushState добавляет хеш при нажатии на всплывающий слой
2. Когда событие onpopstate запускается при нажатии для возврата, слой всплывающего окна скрывается, а хэш изменяется.

 <button onclick=city()> Город</button><br> <button onclick=calendar()> Календарь</button><br> <button onclick=description()> Описание</button> <div id=city class=com style=display: none;> Слой всплывающего окна моделирования города</div> <div id=calendar class=com style=display: none;> Слой всплывающего окна моделирования календаря</div> <div id=description class=com style=display: none;> Имитировать всплывающий слой описания</div>

 кнопка { граница: # 0000; цвет фона: # f90; } .com { позиция: абсолютная ; нижняя: 0; правая: 0; цвет фона: # 888589;

 var cityNode = document.getElementById('city'); var CalendarNode = document.getElementById('calendar'); varscriptionNode = document.getElementById('description function city() { cityNode.style.display = 'block'); ; window.history.pushState({'id':'city'},'','#city') } function Calendar() { CalendarNode.style.display = 'block'; window.history.pushState({'id':'calendar'},'','#calendar') } functiondescription() {descriptionNode.style.display = 'block'; window.history.pushState({'id':'description'},'','#description') } window.addEventListener('popstate', function(e){ // alert('state:' + e.state + ', HistoryLength:' + History.length); if (e.state && e.state.id === 'city') { History.replaceState('','','#'); cityNode.style.display = 'block'; } else if (e.state && e.state.id === 'calendar') { History.replaceState('','','#'); дисплей = 'блокировать'; } else if (e.state && e.state.id === 'description') { History.replaceState('','','#');descriptionNode.style.display = 'block'; .style.display = «нет»; CalendarNode.style.display = «нет»; описаниеNode.style.display = «нет» } })

В основном смотрите на код JS и отслеживайте прямые и обратные события страницы, чтобы контролировать историю.

Исходный код здесь

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.