支付宝小程序浮层组件 弹出菜单·Popup
弹出菜单。
扫码体验
示例代码
{
"defaultTitle": "Popup",
"usingComponents": {
"popup": "mini-ali-ui/es/popup/index"
}
}
<view>
<view class="btn-container">
<button onTap="onTopBtnTap">弹出popup</button>
</view>
<popup show="{{showTop}}" position="top" onClose="onPopupClose">
<view style="height: 200px; background: #fff; display: flex; justify-content: center; align-items: center;">hello world</view>
</popup>
</view>
Page({
data: {
showTop: false,
},
onTopBtnTap() {
this.setData({
showTop: true,
});
},
onPopupClose() {
this.setData({
showTop: false,
});
},
});属性
| 属性 | 类型 | 默认值 | 描述 | 必填 |
|---|---|---|---|---|
| className | String | - | 自定义 class。 | 否 |
| show | Boolean | false | 是否显示菜单。 | 否 |
| animation | Boolean | true | 是否开启动画。 | 否 |
| mask | Boolean | true | 是否显示 mask，不显示时点击外部不会触发 onClose。 | 是 |
| position | String | bottom | 控制从什么方向弹出菜单，bottom 表示底部，left 表示左侧，top 表示顶部，right 表示右侧。 | 是 |
| disableScroll | Boolean | true | 展示 mask 时是否禁止页面滚动。 | 否 |
| zIndex | Number | - | 定义 popup 的层级。 | 否 |
slots
可以在 popup 组件中定义要展示部分，具体可参看示例代码。