注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

  • 组件需要依赖 sass 插件 ，请自行手动安装
  • uni-popup-message 、 uni-popup-dialog 等扩展ui组件，需要和 uni-popup 配套使用，暂不支持单独使用
  • nvue 中使用 uni-popup 时，尽量将组件置于其他元素后面，避免出现层级问题
  • uni-popup 并不能完全阻止页面滚动，可在打开 uni-popup 的时候手动去做一些处理，禁止页面滚动
  • 如果想在页面渲染完毕后就打开 uni-popup ，请在 onReady 或 mounted 生命周期内调用，确保组件渲染完毕
  • 在微信小程序开发者工具中，启用真机调试，popup 会延时出现，是因为 setTimeout 在真机调试中的延时问题导致的，预览和发布小程序不会出现此问题
  • 使用 npm 方式引入组件，如果确认引用正确，但是提示未注册组件或显示不正常，请尝试重新编译项目
  • uni-popup 中尽量不要使用 scroll-view 嵌套过多的内容，可能会影响组件的性能，导致组件无法打开或者打开卡顿
  • uni-popup 不会覆盖原生 tabbar 和原生导航栏
  • uni-popup 为了防止快速打开关闭的情况，组件默认设置了300毫秒延迟显示，如果需要去除，可到uni_modules下修改组件代码
  • app-vue 中组件无法遮盖 video ，ad 等原生组件 ，建议使用 nvue
  • 组件支持 nvue ，需要在 manifest.json > app-plus 节点下配置 "nvueStyleCompiler" : "uni-app"

基本用法

<template>
	<view>
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
	</view>
</template>
<script>
export default {
   methods:{
      open(){
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('top')
      }
   }
}
</script>

Popup Props

属性名

类型

默认值

说明

animation

Boolean

true

是否开启动画

type

String

'center'

弹出方式

mask-click [即将废弃]

Boolean

true

蒙版点击是否关闭弹窗

is-mask-click [1.7.4新增]

Boolean

true

蒙版点击是否关闭弹窗

mask-background-color [1.7.4新增]

rgba

rgba(0,0,0,0.4)

蒙版颜色，建议使用 rgba 颜色值

background-color

String

'none'

主窗口背景色

borderRadius

String

无

设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"

safe-area

Boolean

true

是否适配底部安全区