WeChat h5 prevents the drop-down from appearing "The webpage is provided by..."

WeChat h5 prevents the drop-down to appear "The page is provided by..."

need

1. In the development of WeChat h5, sometimes the project requires that when opening the h5 page on WeChat, it is forbidden to drop down the page to view "the page is provided by..." to obtain the source of the web page

   

2. Since the current WeChat official document does not provide custom functions, it is necessary to use other methods to achieve this purpose

Solution

1. General idea: block touch events on the page, but this will cause the entire page to fail to slide, so judgment is required; only block touch events when the page reaches the top.

2. By writing the following code in App.vue, the entire project can prevent the requirement of "webpage provided by..." from appearing in the drop-down. The code is as follows:

   // 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. Refer to the original link: https://blog.csdn.net/weixin_39503910/article/details/117222774