全部产品
云市场
云游戏

弹出菜单(Popup)

更新时间:2019-09-09 14:07:32

本文介绍弹出菜单(Popup)。

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

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. });