Popup 弹出菜单

弹出菜单。

扫码体验：
Popup 弹出菜单 - 图1

属性名描述类型默认值必选
className自定义classStringfalse
show是否显示菜单Booleanfalsefalse
animation是否开启动画Booleantruefalse
mask是否显示mask，不显示时点击外部不会触发onCloseBooleantruetrue
position控制从什么方向弹出菜单，bottom表示底部，left表示左侧，top表示顶部，right表示右侧Stringbottomfalse
disableScroll展示mask时是否禁止页面滚动Booleantruefalse
zIndex定义popup的层级Number0false

slots

可以在popup组件中定义要展示部分，具体可参看下面示例。

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "popup": "mini-antui/es/popup/index"
  5.   }
  6. }
  1. <view>
  2.   <view class="btn-container">
  3.     <button onTap="onTopBtnTap">弹出popup</button>
  4.   </view>
  5.   <popup show="{{showTop}}" position="top" onClose="onPopupClose">
  6.     <view style="height: 200px; background: #fff; display: flex; justify-content: center; align-items: center;">hello world</view>
  7.   </popup>
  8. </view>
  1. Page({
  2.   data: {
  3.     showTop: false,
  4.   },
  5.   onTopBtnTap() {
  6.     this.setData({
  7.       showTop: true,
  8.     });
  9.   },
  10.   onPopupClose() {
  11.     this.setData({
  12.       showTop: false,
  13.     });
  14.   },
  15. });

原文: https://docs.alipay.com/mini/component-ext/popup