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

日期：2021-01-19 类型：科技新闻 

关键词：如何制作微信小游戏，微信游戏小程序，公众号游戏，h5小游戏模板，小程序游戏源码

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

这类互动在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。

源代码在此

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

上一篇：htnl5运用svg网页页面高斯模糊不清的方式 返回下一篇：没有了