微信h5阻止下拉出现“网页由...提供”

微信h5阻止下拉出现“网页由…提供”

需求

1. 在微信h5的开发中，有时会遇到项目上要求在微信打开h5页面时，禁止下拉页面查看“网页由…提供”获取网页的来源

   

2. 由于目前微信官方文档并没有提供自定义功能，因此就需要使用其他方式来实现这一目的

解决方法

1. 大致思路：阻止页面的触摸事件，但是这样回导致整个页面都无法滑动，因此需要加上判断；只有当页面到达顶端的时候阻止触摸事件。

2. 将以下代码书写在App.vue中，则可以让整个项目实现阻止下拉出现“网页由…提供”的需求，代码如下：

   // js部分
   mounted () {
     this.topNoPullDown()
   },
   methods: {
   	// 当页面到达顶端的时候阻止手动下拉，用于隐藏微信h5下拉展示网页来源
     topNoPullDown () {
       const overscroll = function (el) {
         el.addEventListener('touchstart', function () {
           const top = el.scrollTop
           const totalScroll = el.scrollHeight
           const currentScroll = top + el.offsetHeight
           if (top === 0) {
             el.scrollTop = 1
           } else if (currentScroll === totalScroll) {
             el.scrollTop = top - 1
           }
         })
         el.addEventListener('touchmove', function (evt) {
           if (el.offsetHeight < el.scrollHeight) evt._isScroller = true
         })
       }
       overscroll(document.querySelector('#app'))
       document.body.addEventListener(
         'touchmove',
         function (evt) {
           console.log(evt._isScroller)
           if (!evt._isScroller) {
             evt.preventDefault()
           }
         },
         { passive: false }
       )
     }
   }
   
   // html部分
   <template>
     <div id="app">
       <div class="wx-pages">
         <keep-alive :include="aliveRouter">
           <router-view />
         </keep-alive>
       </div>
     </div>
   </template>
   
   // css部分
   body{
     margin:0;
     padding:0
   }
   
   #app {
     height: 100vh;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
     padding: 0;
     margin: 0;
   }
   
   .wx-pages:after {
     min-height: calc(100% + 1px);
   }
   

3. 参考原文链接：https://blog.csdn.net/weixin_39503910/article/details/117222774