当前位置: 首页 > 文档资料 > uView 开发文档 >

Popup 弹出层

优质
小牛编辑
133浏览
2023-12-01

Popup 弹出层 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序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参数设置,可以设置为lefttoprightbottomcenter
<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版本新增widthheight参数: 1.3.7

1.3.7版本后,优先推荐widthheight参数,并且优先级会高于length,这3个参数都可以设置百分比auto数值(单位rpx)、或者是带pxrpx单位的字符串:

  • 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选择的场景,可以按如下思路进行处理:

  1. 在弹窗内容中放一个scroll-view组件,设置为竖向滚动,并指定高度(必须)
  2. 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弹出方向Stringlefttop / right / bottom / center
mask是否显示遮罩Booleantruefalse
lengthmode=left | 见上方说明String | Numberauto-
zoom是否开启缩放动画,只在modecenter时有效Booleantruefalse
safe-area-inset-bottom是否开启底部安全区适配Booleanfalsetrue
mask-close-able点击遮罩是否可以关闭弹出层Booleantruefalse
custom-style用户自定义样式Object--
border-radius弹窗圆角值Number | String0-
z-index弹出内容的z-indexNumber | String10075-
closeable是否显示关闭图标Booleanfalsetrue
close-icon关闭图标的名称,只能uView的内置图标Stringclose-
close-icon-pos自定义关闭图标位置,top-left为左上角,top-right为右上角,bottom-left为左下角,bottom-right为右下角Stringtop-righttop-left / bottom-left / bottom-right
close-icon-color关闭图标的颜色String#909399-
close-icon-size关闭图标的大小,单位rpxString | Number30-
width 1.3.7mode = left | center | right时有效,优先级高于lengthString | Number--
height 1.3.7mode = top | center | bottom时有效,优先级高于lengthString | Number--
negative-top中部弹出时,以避免可能弹出的键盘重合,往上偏移的值,单位任意,数值则默认为rpx单位String | Number0-
mask-custom-style 1.5.4遮罩自定义样式,一般用于修改遮罩透明度对象形式,如:{background: 'rgba(0, 0, 0, 0.5)'}Object--
duration 1.6.6遮罩打开或收起的动画过渡时间,单位msString | Number250-

Event

事件名说明回调参数版本
open弹出层打开--
close弹出层收起--