uni-app pop弹出层宽高与实际定义时不一致

uni-app pop弹出层宽高与实际定义时不一致

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.23
手机系统 Android
手机系统版本号 Android 14
手机厂商 小米
手机机型 小米平板pad6
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<scroll-view>  
    <view></view>  
</scroll-view>  
<popup ref="tempset" type="center" :animation="true" :mask-click="false" closeable="true"></popup>

操作步骤：

在有<scroll-iew>组件的页面中定义<popup>组件，关闭弹出动画，popup数次弹出，宽高大小不一致。 关闭动画情况下，点击按钮弹出popup时，popup实际宽高有时会与定义大小不一致(有时正常)，似乎为开启缩小动画效果时的缩小前宽高。 开启动画或删除scroll-view，不会出现BUG。

预期结果：

pop弹出层宽高固定

实际结果：

pop弹出层宽高不固定，并与实际定义大小不一致

bug描述：

在有<scroll-iew>的页面中使用<popup>组件，关闭弹出动画，popup宽高与定义大小不符。


更多关于uni-app pop弹出层宽高与实际定义时不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app pop弹出层宽高与实际定义时不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，如果遇到pop弹出层的宽高与实际定义时不一致的问题，可能是由于多种因素导致的，包括但不限于样式覆盖、父容器影响、或者组件本身的特性。下面我将给出一个基本的示例代码，并展示如何确保pop弹出层的宽高与定义的一致。

首先，确保你的pop组件（假设为CustomPop.vue）定义了正确的宽高。这里是一个简单的示例：

<!-- CustomPop.vue -->
<template>
  <view class="custom-pop">
    <!-- 弹出层内容 -->
    <text>这是一个弹出层</text>
  </view>
</template>

<script>
export default {
  name: 'CustomPop'
}
</script>

<style scoped>
.custom-pop {
  width: 300px; /* 设定宽度 */
  height: 200px; /* 设定高度 */
  background-color: #fff;
  border: 1px solid #ccc;
  position: fixed; /* 固定定位 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* 确保在最上层 */
}
</style>

然后，在你的主页面或父组件中，调用这个CustomPop组件，并控制其显示和隐藏。这里假设你有一个按钮来触发弹出层：

<!-- Index.vue -->
<template>
  <view>
    <button @click="showPop = true">显示弹出层</button>
    <CustomPop v-if="showPop" @close="showPop = false" />
  </view>
</template>

<script>
import CustomPop from './components/CustomPop.vue';

export default {
  components: {
    CustomPop
  },
  data() {
    return {
      showPop: false
    };
  }
}
</script>

注意，上面的代码中，CustomPop组件通过v-if来控制显示和隐藏。确保没有其他样式或布局影响了弹出层的宽高。如果仍然有问题，可以检查以下几点：

  1. 全局样式：检查是否有全局样式覆盖了CustomPop的宽高。
  2. 父容器样式：确保父容器没有设置影响子元素宽高的属性，如overflow、padding等。
  3. 动态样式：如果宽高是动态设置的，确保相关变量在更新时正确无误。

通过上述步骤，你应该能够确保pop弹出层的宽高与实际定义时一致。如果问题依旧存在，建议进一步检查具体的布局和样式设置。

回到顶部