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

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

介绍

本示例基于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)
          }
        })