实现安全验证滑块鸿蒙示例代码

鸿蒙场景化示例代码技术工程师
发布于 2025-3-13 10:24
浏览
0收藏

本文原创发布在华为开发者社区

介绍

本示例基于Slider组件和自定义弹窗实现了安全验证,将滑块从左滑动到右的效果。

实现安全验证滑块源码链接

效果预览

实现安全验证滑块鸿蒙示例代码-鸿蒙开发者社区

使用说明

点击“获取验证码”按钮,出现安全验证的弹窗,长按滑块滑动到最右端,弹窗消失。

实现思路

点击“获取验证码”按钮时,调用promptAction.openCustomDialog接口打开自定义弹窗。通过设置Slider组件的滑轨粗细、滑块形状等参数,实现安全验证滑块,当滑块滑动到最右端时,调用promptAction.closeCustomDialog接口关闭弹窗。核心代码如下,源码参考Index.ets。

Text("请滑到最右端")
        .fontSize(20)
        .onClick(() => {
          promptAction.closeCustomDialog(customDialogId)
        })
      Slider({ style: SliderStyle.InSet, value: sliderValue })
        .trackColor('rgba(40,40,40,0.5)')
        .selectedColor('rgba(200,200,200,1)')
        .trackThickness(66)
        .blockStyle({ type: SliderBlockType.IMAGE, image: $r('app.media.image') })
        .onChange((value: number, mode: SliderChangeMode) => {
          if(value === 100) {
            promptAction.closeCustomDialog(customDialogId)
          }
        })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

分类
收藏
回复
举报
回复
    相关推荐