How to adapt vue to the small black box under the ios mobile phone

In the Vue project, if a small black box appears on an iOS phone, it may be caused by page sliding. This little black box usually appears in Safari browsers on iOS 12 and above. Here are several solutions.

Solution

Option 1: Disable iOS page sliding

The idea of ​​​​this method is to prohibit page sliding to avoid the appearance of small black boxes. This can be achieved in the following ways:

Add the following code to the mounted function in the page where the problem needs to be solved:

document.body.addEventListener('touchmove', (e) => {
      e.preventDefault();
}, { passive: false });

Or add the following code to the App.vue component :

<script>
    export default {
        mounted() {
            document.body.addEventListener('touchmove', (e) => {
              e.preventDefault();
            }, { passive: false });
        }
    }
</script>

The effect of this is to disable the sliding event of the page and solve the problem of the small black box. However, this method will affect the overall situation. If some pages need to be slid, special processing will be required for these pages.

Option 2: Solve through CSS

Using CSS to solve is also a relatively simple method. Add the following code to the parent container:

-webkit-overflow-scrolling: touch;
overflow-y: scroll;

For example:

<div class="wrapper">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

<style>
.wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
</style>

The -webkit-overflow-scrolling here is a property in CSS used to control the container scrolling method. After adding it, the elastic scrolling effect of iOS will be enabled to solve the problem of small black boxes, but it will cause the scrolling effect of the entire page to change.

Option 3: Use better-scroll

better-scroll is a library that solves the scrolling problem on the mobile terminal. You can use this library to solve the small black box problem on iOS.

First, install better-scroll:

npm install better-scroll --save

Then introduce and initialize better-scroll in the page you need to use:

<template>
  <div>
      <div ref="wrapper">
          <!--内容-->
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: 3,
      click: true
    })
  }
}
</script>

What needs to be noted here is that better -Scroll initialization needs to be completed in the mounted function of the component, otherwise problems may occur.

Summary

The above are three common methods to solve the small black box problem in iOS. Disabling iOS page sliding is the simplest method, but it will affect the overall situation. Using CSS to solve problems can avoid global problems. Finally, if you need to use better-scroll in your project, you need to pay attention to the timing of initialization.

The above is the detailed content of How to adapt vue to the small black box under the ios mobile phone. For more information, please follow other related articles on the PHP Chinese website!