支付宝小程序浮层组件弹出菜单·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 组件中定义要展示部分，具体可参看示例代码。

支付宝小程序浮层组件 弹出菜单·Popup

扫码体验

示例代码

属性

slots

支付宝小程序浮层组件弹出菜单·Popup