手机微信访问器左上角回到按钮阻拦作用

日期:2021-02-27 类型:科技新闻 

关键词:开发一个小程序多少钱,凡科轻站小程序,微信群抽奖小程序,小程序登录页面,微信小程序 微店

在手机微信群众号开发设计中,有时必须对访问器左上角回到按钮开展阻拦解决有关的网页页面逻辑性,而其实不是让网页页面立即回到上1页,以前在这个细连接点上的1直完成得并不是很好。但看到京东买东西群众号上的实际效果却完成得十分好,因此自身也刚开始了这层面的尝试。京东的实际效果以下图:

从上图京东买东西实际效果上看来,在点一下检索拉起1个检索页面,随后点一下左上角反回,只是将检索页面收起,而网页页面沒有再次像载入进度条1样去回到,而我网页页面必须的更是这样的实际效果,下面就用vue来做1个这个全过程的demo吧。

前提条件:手机微信左上角的回到按钮实际上没法被阻拦,可是能够监视到这个回到恶性事件。

思路:要想真实阻拦回到恶性事件,能够当今网页页面先向window.history中加上1个纪录(具体只是在历史时间纪录堆栈中加上1条纪录pushState,访问器其实不会真实去载入这个相对路径),当点一下回到时,监视到回到恶性事件解决自身想解决的逻辑性,总之手机微信它是1定要实行回到,刚加上的那条纪录就会从window.history拿出并将此相对路径更换当今网页页面相对路径。留意:这里只是相对路径的更换,只是将相对路径换了个姓名,其实不是会真实去载入这个相对路径。

完成:demo里创建了两个vue网页页面(first 和 two),第1个网页页面自动跳转到到第2个网页页面。随后在第2个网页页面弹出1个蒙层,这时候点一下左上角回到时,其实不是回到first,而是先将蒙层消退,再度点一下回到时才是回到上1页;

完成实际效果以下:

     
 

有关编码解读:

1 在第2个网页页面mounted方式中添加,加上监视回到恶性事件方式。当回到按钮被点一下时,这里让弹出的蒙层掩藏;

  mounted() {
    let that = this;
    // 加上回到恶性事件监视
    window.addEventListener("popstate", function(e) {
      that.isShowTestDiv = false;
    }, false);
  },

2 监视蒙层,当它显示信息时,在window.history(历史时间堆栈)中加上1条纪录;

watch: {
    isShowTestDiv: function(newVal, oldVal) {
      if (newVal === true) {
        this.pushHistory();
      }
    }
  }
    pushHistory() { // 改动history
      var state = {
        title: "",
        url: "/two" // 这个url能够随意填,只是以便不让访问器显示信息的url详细地址产生转变,对网页页面实际上无危害
      };
      window.history.pushState(state, state.title, state.url);
    },

3 最终弹出的蒙层假如客户点蒙层上有关实际操作将蒙层关掉,那末要手动式将自身加上的那条纪录从history中移除,在vue将路由器back1下便可。

helloClick() { // 点一下弹出来的hello蒙板
      this.isShowTestDiv = false;
      this.$router.back(); // 将加上纪录从history中移除
    }

    demo详细地址

gitHub: https://github.com/LiJinShi/wechat_back_vue

总结

以上所述是网编给大伙儿详细介绍的手机微信访问器左上角回到按钮阻拦作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!