WeChat h5 では、「Web ページは...によって提供されています」というドロップダウンが表示されなくなります。

WeChat h5 では、ドロップダウンに「ページは...によって提供されています」が表示されません。

必要

1. WeChat h5 の開発では、WeChat で h5 ページを開くときに、Web ページのソースを取得するためにページをプルダウンして「ページは...によって提供されています」を表示することを禁止することがプロジェクトによって要求されることがあります。

   

2. 現在のWeChat公式ドキュメントではカスタム機能が提供されていないため、この目的を達成するには他の方法を使用する必要があります

解決

1. 一般的な考え方: ページのタッチ イベントを阻止しますが、これによりページ全体がスライドできなくなるため、判断を追加する必要があります。タッチ イベントはページが最上部に到達した場合にのみブロックされます。

2. App.vue に次のコードを記述することで、プロジェクト全体で「Web ページの提供元」という要件がドロップダウンに表示されないようにすることができます。

   // 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