一、背景
给组件绑定popup弹窗,并设置弹窗内容,交互逻辑和显示状态。
常见场景:点击按钮弹出popup弹窗,并对弹窗的内容进行交互逻辑处理,如:弹窗内点击跳转到其他页面
二、给组件绑定Popup弹窗
PopupOptions类型说明
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
message | string | 是 | 弹窗信息内容。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
placementOnTop(deprecated) | boolean | 否 | 是否在组件上方显示,默认值为false。 说明: 从 API version 10 开始废弃,建议使用placement替代。 |
primaryButton | { value: string, action: () => void } | 否 | 第一个按钮。 value: 弹窗里主按钮的文本。 action: 点击主按钮的回调函数。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
secondaryButton | { value: string, action: () => void } | 否 | 第二个按钮。 value: 弹窗里辅助按钮的文本。 action: 点击辅助按钮的回调函数。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
arrowOffset9+ | Length | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。如果显示在屏幕边缘,气泡会自动左右偏移,数值为0时箭头始终指向绑定组件。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
showInSubWindow9+ | boolean | 否 | 是否在子窗口显示气泡,默认值为false。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
mask10+ | boolean | { color : ResourceColor } | 否 | 设置气泡是否有遮罩层及遮罩颜色。如果设置为false,则没有遮罩层;如果设置为true,则设置有遮罩层并且颜色为透明色;如果设置为Color,则为遮罩层的颜色。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
messageOptions10+ | PopupMessageOptions | 否 | 设置弹窗信息文本参数。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
targetSpace10+ | Length | 否 | 设置popup与目标的间隙。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
placement10+ | Placement | 否 | 设置popup组件相对于目标的显示位置,默认值为Placement.Bottom。 如果同时设置了placementOnTop和placement,则以placement的设置生效。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
offset10+ | Position | 否 | 设置popup组件相对于placement设置的显示位置的偏移。 说明: 不支持设置百分比。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
enableArrow10+ | boolean | 否 | 设置是否显示箭头。 默认值:true 说明: 当页面可用空间无法让气泡完全避让时,气泡会覆盖到组件上并且不显示箭头。 元服务API: 从API version 11开始,该接口支持在元服务中使用。 |
popupColor11+ | Color | string | number | Resource | 否 | 提示气泡的颜色。如需去除模糊背景填充效果,需将backgroundBlurStyle设置为BlurStyle.NONE。 默认值:透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK。 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
autoCancel11+ | boolean | 否 | 页面有操作时,是否自动关闭气泡。 默认值:true 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
width11+ | Dimension | 否 | 弹窗宽度。 说明: showInSubWindow=true时最大高度为设备屏幕高度,showInSubWindow=false时最大高度为应用窗口高度。高度限定逻辑=最大高度-状态栏高度(没有时高度为0)-dock栏高度(没有时高度为0)-40VP-40VP。 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
arrowPointPosition11+ | ArrowPointPosition | 否 | 气泡尖角相对于父组件显示位置,气泡尖角在垂直和水平方向上有 "Start"、"Center"、"End"三个位置点可选。以上所有位置点均位于父组件区域的范围内,不会超出父组件的边界范围。 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
arrowWidth11+ | Dimension | 否 | 设置箭头宽度。若所设置的箭头宽度超过所在边的长度减去两倍的气泡圆角大小,则不绘制气泡箭头。 默认值:16.0_vp 说明: 不支持设置百分比。 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
arrowHeight11+ | Dimension | 否 | 设置箭头高度。 默认值:8.0_vp 说明: 不支持设置百分比。 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
radius11+ | Dimension | 否 | 设置气泡圆角半径。 默认值:20.0_vp 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
shadow11+ | ShadowOptions | ShadowStyle | 否 | 设置气泡阴影。 默认值:ShadowStyle.OUTER_DEFAULT_MD 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
backgroundBlurStyle11+ | BlurStyle | 否 | 设置气泡模糊背景参数。 默认值:BlurStyle.COMPONENT_ULTRA_THICK 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
transition12+ | TransitionEffect | 否 | 自定义设置popup弹窗显示和退出的动画效果。 说明: 1.如果不设置,则使用默认的显示/退出动效。 2.显示动效中按back键,打断显示动效,执行退出动效,动画效果为显示动效与退出动效的曲线叠加后的效果。 3.退出动效中按back键,不会打断退出动效,退出动效继续执行,back键不被响应。 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
onWillDismiss12+ | boolean|(dismissPopupAction: DismissPopupAction) => void | 否 | 设置popup交互式关闭拦截开关及拦截回调函数,默认值为true,popup响应点击、左滑/右滑、三键back。 1.当为boolean类型时,如果设置为false,则不响应点击、左滑/右滑、三键back或键盘ESC退出事件,仅当设置"弹窗显示状态"参数show值为false时才退出;如果设置为true,则正常响应退出事件; 2.如果设置为函数类型,则拦截退出事件且执行回调函数。 说明: 在onWillDismiss回调中,不能再做onWillDismiss拦截。 元服务API: 从API version 12开始,该接口支持在元服务中使用。 |
三、具体实现
代码:
javascript
@Extend(Text)
function PopupTextStyle() {
.fontSize(14)
.fontColor('#222427')
.lineHeight(16)
}
@Entry
@Component
struct PopupExample {
@State customPopup: boolean = false; //定义变量控制弹窗显示
controller: TabsController = new TabsController()
build() {
Column(){
Image($r('app.media.navImg')).width(100)
.onClick(()=>{
this.customPopup = !this.customPopup;
})
.bindPopup(this.customPopup, {
builder: this.popupBuilder,
placement: Placement.Bottom,
mask: { color: '#80000000' },
popupColor: Color.White,
enableArrow: true, //是否显示箭头
arrowPointPosition: ArrowPointPosition.CENTER, //气泡尖角位置
arrowWidth: 13, //箭头宽度
arrowHeight: 10, //箭头高度
radius: 4,
offset: {x:-5, y: -8 },
onStateChange: (e) => {
if (!e.isVisible) {
this.customPopup = false;
}
}
})
}
.layoutWeight(1)
.width('100%')
.backgroundColor('#f0f2f4')
}
//popup构造器定义弹框内容
@Builder
popupBuilder() {
Column({ space: 16 }) {
Text('首页')
.PopupTextStyle()
.onClick(()=>{
console.log('lucy== 11')
})
Text('购物车')
.PopupTextStyle()
.onClick(()=>{
console.log('lucy== 22')
})
Text('分类')
.PopupTextStyle()
.onClick(()=>{
console.log('lucy== 33')
})
}
.alignItems(HorizontalAlign.Start)
.width(74)
.padding({ top: 16, bottom: 16, left: 16 })
}
}
效果:
点击图片出现弹窗,弹窗内点击内容进行交互处理