用头条app打开h5也u页面监听返回键

Question

业务是：广告投放在今日头条APP
现在需求：点了链接到H5页面，返回（物理返回键，或者右滑），提示XX内容，如何实现
使用技术：vue

安卓和苹果自带浏览器按照网上方法，有的可以监听，但是用头条app打开，物理返回键都监听不到，请问老大们，用啥思路解决这个问题

Answer 1

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7435902
• 这篇博客你也可以参考下：【vue】h5 实现路由管理：保留历史页面，并在后退时释放
• 除此之外, 这篇博客: vue页面在微信浏览器下拉出现网址的解决，并兼容小米8内置浏览器等浏览器页面到底不能滑动问题（因为app也用到了这个页面）中的 需求：微信小程序内嵌H5页面，隐藏下拉出现网址并兼容小米8等特殊浏览器（因为app也用到了这个页面） 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 重点
  我参考这位大神的解决方案并加以改动 https://www.jianshu.com/p/f8182998895e
  1 在根目录下的index.html中

  	html,body,#app,.wx-pages{
      padding: 0;
        margin: 0;
      height: 100%;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
  	}
  

  2 在components目录下创建组件 Scroll.vue 组件
  （你可以直接复制）

  <style scoped="scoped">
      .w-scroll {
          height: 100%;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
      }
  </style>
  <template>
      <div ref="scroll" class="w-scroll">
          <slot></slot>
      </div>
  </template>
   
  <script>
      export default {
          name: 'scroll',
          data() {
              return {}
          },
          computed: {},
          mounted() {
              this.wScroll(this.$refs.scroll);
          },
          methods: {
              wScroll(elem) {
                  var startX = 0,startY = 0;
                  document.addEventListener('touchstart', function(evt) {
                      var touch = evt.touches[0]; 
                      startX = Number(touch.pageX); 
                      startY = Number(touch.pageY); 
                  });
                  elem.addEventListener('touchmove', function(ev) {
                      var _point = ev.touches[0],
                          _top = elem.scrollTop;
                      var _bottomFaVal = elem.scrollHeight - elem.offsetHeight;
                      if(_top === 0) {
                          if(_point.clientY > startY) {
                              ev.preventDefault();
                          } else {
                              ev.stopPropagation();
                          }
                      } else if(_top === _bottomFaVal) {
                          elem.scrollTop--;
                      } else if(_top > 0 && _top < _bottomFaVal) {
                          ev.stopPropagation();
                      } else {
  						ev.stopPropagation();
                      }
                  }, {
                      passive: false
                  });
              }
          },
      }
  </script>
  

  3 在你所需要的页面引入

  <template>
  	<Scroll>
  		<div>页面内容<div>
  	</Scroll>
  </template>
  <script>
  import Scroll from '@/components/Scroll';
  	export default {
  		name: 'Home',
  		components:{
              Scroll
         },
      }
  </script>
  

  第一次写 不太会描述 也没有图 希望能帮助到你