HarmonyOS 滑块认证的demo？

Question

如题：HarmonyOS 滑块认证的demo？

Answer 1

问题场景

注册需要二次认证，新增一个滑块验证的功能

参考代码：

import promptAction from '@ohos.promptAction'
let customDialogId: number = 0;
let sliderValue = 0;
@Builder
function customDialogBuilder() {
  Column() {
    Row({space:20}){
      Text('安全验证').fontSize(26)
        .width('80%')
        .height(60)
        .textAlign(TextAlign.Center)
        .lineHeight(60)
      Image($r('app.media.app_icon'))
        .width(26)
        .height(26)
        .onClick(() => {
          promptAction.closeCustomDialog(customDialogId)
        })
    }
    .margin({bottom:16})
    Stack() {
      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)
          }
        })
    }
    .height(90)
    .width('80%')
  }.height(220).padding(5)
}
@Entry
@Component
struct TestPage {
  @State message: string = '获取验证码'
  build() {
    Row() {
      Column() {
        Button(this.message)
          .fontSize(50)
          .padding(16)
          .onClick(() => {
            promptAction.openCustomDialog({
              builder: customDialogBuilder.bind(this)
            }).then((dialogId: number) => {
              customDialogId = dialogId
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}