# TopPopup 顶部弹出层

概述

TopPopup 顶部弹出层,从顶部弹出的浮层,引导用户进行相关操作。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "顶部弹出层",
  "usingComponents": {
    "fui-top-popup":"/components/firstui/fui-top-popup/fui-top-popup"
  }
}
1
2
3
4
5
6
第二种:在根目录app.json文件中全局引入
"usingComponents": {
   "fui-top-popup":"components/firstui/fui-top-popup/fui-top-popup"
}
1
2
3

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

通过 show 属性控制是否显示顶部弹出层,bindclose 事件为当 maskClosable 属性值为true时点击遮罩回调事件,通过设置 show 属性为false来关闭顶部弹出层。

<fui-top-popup show="{{show}}" bindclose="closePopup">
	<view class="fui-custom__wrap">
		这是自定义内容区
	</view>
</fui-top-popup>
1
2
3
4
5
/* 自定义内容区样式需自行控制 */
.fui-custom__wrap {
	width: 100%;
	height: 520rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
1
2
3
4
5
6
7
8
data:{
	show: false
},
//调用此方法显示顶部弹出层
showPopup() {
	this.setData({
		show:true
	})
},
closePopup() {
	this.setData({
		show:false
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
内容可滚动

当内容较多需要滚动时,可在组件内部使用 scroll-view 来达到内容滚动效果(注意:组件内部自定义内容样式需要自行控制)。

<fui-top-popup show="{{show}}" bindclose="closePopup">
    <view class="fui-scroll__wrap">
      <view class="fui-title fui-title__pb">测试标题二</view>
      <scroll-view scroll-y class="fui-scroll__view">
        <fui-list-cell wx:for="{{itemList}}" wx:key="index">item{{index+1}}</fui-list-cell>
      </scroll-view>
      <view class="fui-icon__close" bindtap="closePopup">
        <fui-icon name="close" size="{{48}}"></fui-icon>
      </view>
    </view>
  </fui-top-popup>
1
2
3
4
5
6
7
8
9
10
11
.fui-scroll__wrap {
	padding-top: 30rpx;
	padding-bottom: 24rpx;
	position: relative;
}
.fui-title {
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
	padding-bottom: 24rpx;
}
.fui-icon__close {
	position: absolute;
	top: 24rpx;
	left: 24rpx;
}

.fui-scroll__view {
	width: 100%;
	height: 600rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
data:{
	show: false,
	itemList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
},
//调用此方法显示顶部弹出层
showPopup() {
	this.setData({
		show:true
	})
},
closePopup() {
	this.setData({
		show:false
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Slots

插槽名称 说明
default 自定义显示内容

# Props

属性名 类型 说明 默认值 其他说明
show Boolean 是否显示顶部弹出层 false -
background String 顶部弹出层背景颜色 #fff -
radius Number, String 顶部弹出层左下/右下圆角值,单位rpx 24 -
zIndex Number, String 顶部弹出层z-index值 1001 -
maskClosable Boolean 点击遮罩 是否可关闭 true -
maskBackground String 遮罩背景色 rgba(0,0,0,.6) -

# Events

事件名 说明 回调参数
bind:close 点击遮罩层(maskClosable=true)时触发 -

示例预览

Last Updated: 10/7/2023, 12:14:41 PM