本文主要是介绍uniapp组件库Popup 弹出层 的使用方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
#平台差异说明
#基本使用
#设置弹出层的方向
#设置弹出层的圆角
#控制弹窗的宽度 | 高度
#内容局部滚动
#API
#Props
#Event
弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
#平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
#基本使用
- 弹出层的内容通过
slot传入，由用户自定义 - 通过
v-model绑定一个布尔值的变量控制弹出层的打开和收起
<template><view><u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup><u-button @click="show = true">打开</u-button></view>
</template><script>export default {data() {return {show: false}}}
</script>
#设置弹出层的方向
- 可以通过
mode参数设置，可以设置为left、top、right、bottom、center
<template><u-popup v-model="show" mode="top"><view>人生若只如初见，何事秋风悲画扇</view></u-popup>
</template>
#设置弹出层的圆角
可以给border-radius设置一个值来给弹窗增加圆角，单位rpx。
<template><u-popup v-model="show" mode="top" border-radius="14"><view>人生若只如初见，何事秋风悲画扇</view></u-popup>
</template>
#控制弹窗的宽度 | 高度
这里说的宽度，指的是左边，右边，中部弹出的场景，高度指的是顶部和底部弹出的场景(因为这两个场景宽度都是100%)。
uView提供了length来控制此种情况，此值可以是数值(单位rpx)，auto，百分比等，内部会自动处理对应的逻辑。 如果为auto的时候，表示弹窗的宽度 | 高度由内容撑开。
1.3.7版本新增width和height参数： 1.3.7
1.3.7版本后，优先推荐width和height参数，并且优先级会高于length，这3个参数都可以设置百分比、auto、数值(单位rpx)、或者是带px和rpx单位的字符串：
width只对mode = left | center | right模式有效height只对mode = top | center | bottom模式有效
提示
1.3.7版本后，内置了scroll-view元素，内如内容超出容器的高度，将会自动获得垂直滚动的特性，如果您因为在slot内容做了滚动的处理，而造成了 冲突的话，请移除自定义关于滚动部分的逻辑。
<template><u-popup v-model="show" mode="top" length="60%"><view>等闲变却故人心，却道故人心易变</view></u-popup><u-popup v-model="show" mode="center" width="500rpx" height="600px"><view>骊山语罢清宵半，泪雨霖铃终不怨</view></u-popup>
</template>
#内容局部滚动
如果您需要让弹窗中的内容局部滚动，局部固定，比如商城底部弹出SKU选择的场景，可以按如下思路进行处理：
- 在弹窗内容中放一个
scroll-view组件，设置为竖向滚动，并指定高度(必须) - 在
scroll-view组件下方放一块无需滚动内容，如下：
<template><view class=""><u-button @click="show = true;">打开弹窗</u-button><u-popup mode="bottom" v-model="show"><view class="content"><scroll-view scroll-y="true" style="height: 300rpx;"><view><view v-for="index in 20" :key="index">第{{index}}个Item</view></view></scroll-view><view class="confrim-btn"><u-button @click="show = false;">确定</u-button></view></view></u-popup></view>
</template><script>export default {data() {return {show: false}}}
</script><style lang="scss" scoped>.content {padding: 24rpx;text-align: center;}
</style>
#API
#Props
注意：props中没有控制弹窗打开与收起的参数，因为这是通过v-model绑定变量实现的，见上方说明。
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| mode | 弹出方向 | String | left | top / right / bottom / center |
| mask | 是否显示遮罩 | Boolean | true | false |
| length | mode=left | 见上方说明 | String | Number | auto | - |
| zoom | 是否开启缩放动画，只在mode为center时有效 | Boolean | true | false |
| safe-area-inset-bottom | 是否开启底部安全区适配 | Boolean | false | true |
| mask-close-able | 点击遮罩是否可以关闭弹出层 | Boolean | true | false |
| custom-style | 用户自定义样式 | Object | - | - |
| border-radius | 弹窗圆角值 | Number | String | 0 | - |
| z-index | 弹出内容的z-index值 | Number | String | 10075 | - |
| closeable | 是否显示关闭图标 | Boolean | false | true |
| close-icon | 关闭图标的名称，只能uView的内置图标 | String | close | - |
| close-icon-pos | 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角 | String | top-right | top-left / bottom-left / bottom-right |
| close-icon-color | 关闭图标的颜色 | String | #909399 | - |
| close-icon-size | 关闭图标的大小，单位rpx | String | Number | 30 | - |
| width 1.3.7 | mode = left | center | right时有效，优先级高于length | String | Number | - | - |
| height 1.3.7 | mode = top | center | bottom时有效，优先级高于length | String | Number | - | - |
| negative-top | 中部弹出时，以避免可能弹出的键盘重合，往上偏移的值，单位任意，数值则默认为rpx单位 | String | Number | 0 | - |
| mask-custom-style 1.5.4 | 遮罩自定义样式，一般用于修改遮罩透明度对象形式，如：{background: 'rgba(0, 0, 0, 0.5)'} | Object | - | - |
| duration 1.6.6 | 遮罩打开或收起的动画过渡时间，单位ms | String | Number | 250 | - |
#Event
| 事件名 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| open | 弹出层打开 | - | - |
| close | 弹出层收起 | - | - |
这篇关于uniapp组件库Popup 弹出层 的使用方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
