ios safari 往右滑关闭vant-ui框架 弹框会出现闪烁和反弹现象？

  • Z时代
  • 2024-02-28
  • 分类：IT

ios safari 往右滑关闭vant-ui框架 弹框会出现闪烁和反弹现象，就是弹框里面打开另外一个弹框，然后再关闭弹框就会出现闪烁和反弹的现象

回答：

这种问题通常出现在移动端网页上使用 fixed 定位时，上下拉或是侧滑关闭页面时会出现元素的抖动，产生闪烁和反弹的效果。

造成这种现象的原因是 Safari 和 Chrome 在 fixed 定位元素的交互效果上存在一些问题，导致页面元素在屏幕滚动时无法正常的固定在某个位置，从而产生抖动。

对于这个问题，可以尝试以下几种解决方法：

  1. 尽量减少 fixed 元素的使用

在移动端网页设计中，尽量减少使用 fixed 定位的元素，可以考虑使用绝对定位（absolute）或者相对定位（relative）的方式布局。

  1. 设置元素的 transform 属性

在 fixed 元素上添加 transform 属性，将 fixed 定位元素转换为三维空间中的元素，能够解决 fixed 元素在滚动过程中的抖动问题，例如：

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
}
  1. 增加 CSS3 动画缓冲效果

在 fixed 元素的出现和消失时，增加一些 CSS3 动画缓冲效果，可以减缓 fixed 元素在滚动过程中出现抖动的现象。

  1. 阻止 touchmove 事件的默认行为

可以在 fixed 元素上阻止 touchmove 事件的默认行为，例如：

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

以上是一些可能的解决方法，可以根据具体的情况选择合适的方法进行尝试，达到预期的效果。

回答：

这是由于iOS Safari的触摸滑动事件默认会触发页面的回弹效果，而vant-ui的弹框也是基于浮层实现的，因此在滑动关闭页面时可能会出现反弹和闪烁的问题。

您可以尝试通过在页面上禁用默认的滑动回弹效果来解决这个问题，具体做法如下：

1.在页面中加入如下CSS样式来禁用默认的滑动回弹效果：

body {
  overscroll-behavior-y: contain;
}

2.在您的vant-ui弹框组件中，监听touchmove事件，并阻止事件的默认行为：

<template>
  <van-dialog :visible.sync="dialogVisible" @touchmove.prevent></van-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

这样做可以防止页面滑动时触发默认的回弹效果，并使vant-ui弹框更加稳定。

以上是 ios safari 往右滑关闭vant-ui框架 弹框会出现闪烁和反弹现象？ 的全部内容， 来源链接： utcz.com/p/934020.html

回到顶部