如何使用Popup弹出菜单-阿里云帮助中心

弹出菜单。

扫码体验

示例代码

// API-DEMO page/component/popup/popup.json
{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "popup": "mini-antui/es/popup/index"
  }
}

<!-- API-DEMO page/component/popup/popup.axml -->
<view>
  <view class="btn-container">
    <button onTap="onTopBtnTap">上</button>
    <button onTap="onButtomBtnTap">下</button>
    <button onTap="onRightBtnTap">右 无mask</button>
    <button onTap="onLeftBtnTap">左 无动画</button>
  </view>
  <popup show="{{showLeft}}" animation="{{false}}" position="left" onClose="onPopupClose">
    <view class="box left">hello world</view>
  </popup>
  <popup show="{{showRight}}" position="right" mask="{{false}}" onClose="onPopupClose">
    <view class="box right" style="display: flex; flex-direction: column;">
      <view>hello world</view>
      <view style="margin-top: 20px;">
        <button onTap="onPopupClose" style="width: 100px;">关闭</button>
      </view>
    </view>
  </popup>
  <popup show="{{showTop}}" position="top" onClose="onPopupClose">
    <view class="box top">hello world</view>
  </popup>
  <popup show="{{showBottom}}" position="bottom" onClose="onPopupClose">
    <view class="box bottom">hello world</view>
  </popup>
</view>

// API-DEMO page/component/popup/popup.js
Page({
  data: {
    showLeft: false,
    showRight: false,
    showTop: false,
    showBottom: false,
  },
  onTopBtnTap() {
    this.setData({
      showTop: true,
    });
  },
  onRightBtnTap() {
    this.setData({
      showRight: true,
    });
  },
  onLeftBtnTap() {
    this.setData({
      showLeft: true,
    });
  },
  onButtomBtnTap() {
    this.setData({
      showBottom: true,
    });
  },
  onPopupClose() {
    this.setData({
      showLeft: false,
      showRight: false,
      showTop: false,
      showBottom: false,
    });
  },
});

/* API-DEMO page/component/popup/popup.acss */
.btn-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btn-container button {
  width: 250px;
}

.box.top, .box.bottom {
  height: 200px;
}

.box.left, .box.right {
  width: 200px;
  height: 100%;
}

.box {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

属性

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

slots

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