弹出框滚屏问题破解：uni-popup与scroll-view完美兼容

2023-07-26 04:03:25

避免uni-popup组件和scroll-view滚动组件之间滚动冲突

在使用uni-popup组件和scroll-view滚动组件时，可能会遇到一个令人头疼的问题：在uni-popup组件内滚动时，也导致页面上的scroll-view滚动。这无疑是一种烦人的体验，如何解决呢？

解决方案

这里有两个行之有效的解决方案：

在uni-popup上添加滚动禁止事件和样式

<uni-popup @touchmove.stop.prevent style="height: 100vh;">

@touchmove.stop.prevent禁止滚动事件，而height: 100vh;将uni-popup组件的高度设置为100%视口高度。

弹出popup后禁止页面的touchmove事件

handlePopupOpen() {
  // 当弹出框打开时，禁止页面的touchmove事件
  document.body.style.touchmove = 'none';
},
handlePopupClose() {
  // 当弹出框关闭时，解除页面的touchmove事件禁止
  document.body.style.touchmove = '';
},

这两种方法都能有效解决滚动冲突问题。

示例代码

为了更直观地理解，这里提供一个完整的示例代码：

<template>
  <view class="container">
    <scroll-view scroll-y style="height: 100vh;">
      <!-- 页面内容 -->
    </scroll-view>
    <uni-popup
      v-model="showPopup"
      @open="handlePopupOpen"
      @close="handlePopupClose"
      @touchmove.stop.prevent
      style="height: 100vh;"
    >
      <!-- 弹出框内容 -->
      <scroll-view scroll-y style="height: 100vh;">
        <!-- 弹出框滚动内容 -->
      </scroll-view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
    };
  },
  methods: {
    handlePopupOpen() {
      // 当弹出框打开时，禁止页面的touchmove事件
      document.body.style.touchmove = 'none';
    },
    handlePopupClose() {
      // 当弹出框关闭时，解除页面的touchmove事件禁止
      document.body.style.touchmove = '';
    },
  },
};
</script>

<style>
.container {
  height: 100vh;
}
</style>