Html5网页页面中的回到完成的方式

2020-10-10 17:11 jianzhan

看到这个题型你将会感觉这是甚么鬼? 实际上我想说的是这类,看下面的录制:

这类互动在H5网页页面中数不胜数,点一下大城市->弹出大城市挑选浮层->按回到按钮关掉浮层。

这些实际操作全是不必点一下左上角/右上角的关掉按钮便可以开展的,飞猪的H5是前行出現弹层,回到时弹层关掉,别的家都不好(去哪儿网H5飞机票,美团H5酒店餐厅)。

为何要这么设计方案?

由于H5是在手机上上实际操作的,手机上上的手指可实际操作地区的遮盖范畴很小,更别说左上角/右上角这些死角(撤销/关掉)地区了。你毫无疑问听过这个实际操作:轻触回到。这个在客户实际操作的情况下十分便捷友善,挑选完大城市后,不必须点一下撤销,立即在大拇指能够实际操作的地区点一下回到就关掉了弹层。

怎样完成

既然有这类十分好的要求,那做为开发设计毫无疑问就会念头想方设法的完成这个作用了。 你乃至都无需google,你就应当会想起相近的history.back(),history.go()这些方式了。 但是想起这些依然没用,基础理论上 访问器/webview 的回到/前行的是要再次载入网页页面的,由于URL产生了转变。 假如你真的了解单网页页面运用(SPA),或应用React/Vue你就应当了解有个物品叫:路由器。 这些根据更改hash且没法更新的url转变是HTML5时添加的history作用

the-history-interface

interface History {
  readonly attribute unsigned long length;
  attribute ScrollRestoration scrollRestoration;
  readonly attribute any state;
  void go(optional long delta = 0);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional DOMString? url = null);
  void replaceState(any data, DOMString title, optional DOMString? url = null);
};
  1. pushState
  2. replaceState

也有1个恶性事件

  1. onpopstate

pushState,replaceState 用来更改histroy堆栈次序,onpopstate 在回到,前行的情况下开启

vue-router中的完成也是这般(第1694行)

实际完成

既然说了这么多,那大家看来下如何完成这类作用。

看来下 pushState 和 replaceState 的适配性

全绿,用起来安心多了。

思路:

  1. 点一下弹层时 pushState 加上 hash
  2. "轻触回到"的情况下开启 onpopstate 恶性事件情况下掩藏弹层并改动 hash
<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>
      button {
          border: #0000;
          background-color: #f90;
      }
      .com {
        position: absolute ;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #888589;
      }
var cityNode = document.getElementById('city');
    var calendarNode = document.getElementById('calendar');
    var descriptionNode = 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')
      }
      function description() {
        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('','','#');
            calendarNode.style.display = 'block';
        } else if (e.state && e.state.id === 'description') {
            history.replaceState('','','#');
            descriptionNode.style.display = 'block';
        } else {
            cityNode.style.display = 'none';
            calendarNode.style.display = 'none';
            descriptionNode.style.display = 'none';
        }
      })

关键看 JS 编码,监视网页页面的前行和后退恶性事件来操纵history。

源代码在此

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。