vue怎么适配ios手机下面的小黑框

百变鹏仔 2个月前 (10-30) #前端问答

文章标签手机

在vue项目中，如果在ios手机上出现了小黑框，可能是由于页面滑动引起的问题。这个小黑框通常出现在ios 12及以上版本的safari浏览器中。这里介绍几种解决方法。

解决方案

方案一：禁用iOS页面滑动

这种方法的思路是禁止页面滑动，来避免小黑框的出现。可以通过以下方式实现：

在需要解决问题的页面中的mounted函数中加入以下代码：

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

或者在App.vue组件中加入以下代码：

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

这样做的效果是将页面的滑动事件禁止掉，解决了小黑框问题。但是，这种方法会影响到全局，如果有些页面需要滑动，则需要对这些页面做特殊处理。

立即学习“前端免费学习笔记（深入）”；

方案二：通过CSS解决

使用CSS来解决也是一种比较简单的方法。在父级容器中加入以下代码：

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

例如：

<div class="wrapper">  <div class="content">    <!-- 内容 -->  </div></div><style>.wrapper {  -webkit-overflow-scrolling: touch;  overflow-y: scroll;}</style>

这里的-webkit-overflow-scrolling是CSS中的一个属性，用于控制容器的滚动方式。加上后会启用iOS的弹性滚动效果，解决小黑框问题，但是会导致整个页面的滚动效果变化。

方案三：使用better-scroll

better-scroll是一款解决移动端滚动问题的库，可以通过该库来解决iOS上的小黑框问题。

首先，安装better-scroll：

npm install better-scroll --save

然后在需要使用的页面中引入和初始化better-scroll即可：

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

这里需要注意的是，better-scroll的初始化需要在组件的mounted函数中完成，否则可能会出现问题。

总结

以上是三种常见的解决iOS小黑框问题的方法。禁用iOS页面滑动是最简单的方法，但会影响全局。使用CSS来解决问题则可以避免影响全局的问题。最后，如果需要在项目中使用better-scroll，需要注意初始化的时机。

文章推荐

vue怎么适配ios手机下面的小黑框

解决方案

方案一：禁用iOS页面滑动

方案二：通过CSS解决

方案三：使用better-scroll

总结

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗