一个自定义滑动验证组件

最新推荐文章于 2023-12-08 08:07:12 发布
最新推荐文章于 2023-12-08 08:07:12 发布
阅读量525 收藏 1
点赞数
分类专栏： android开发 文章标签： android 滑动验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MingHuang2017/article/details/106983326
版权

一个自定义滑动验证组件

前段时间项目要求登录的时候加个滑动验证的功能。效果如下：

在这里插入图片描述
乍一看，还真不知道怎么下手，后来想了想之前做过一个左滑删除的控件
源码在这里

在这里插入图片描述

觉得可以将这个改一下拿来用，只是换个滑动方向，估计成功概率比较大。接着就把以前的代码翻出来，看看怎么改，虽然修改过程中遇到些问题，但最终还是达到了想要的效果。

下面说说实现的原理：

实现过程中借助了ViewDragHelper这个类来简化代码，ViewDragHelper的用法可以参考这篇文章。实现原理是这样的，用一个水平方向的LinearLayout包裹两个view，A在左，B在右，且B可以被拖动，初始状态下A被隐藏起来，当B被往右拖动时，改变A的left/right坐标，再重绘，看起来就像A是被B拖出来的一样。

在这里插入图片描述
初始状态，只显示滑块，蓝色块被隐藏

在这里插入图片描述
拖动滑块带出蓝色块

在这里插入图片描述
直到拖出全部

原理就是这样的，很简单，具体代码的话就看源码吧，有注释，也好理解。有apk，可以先下来看看效果。下载apk

demo源码：https://github.com/MingHuang1024/SwipeLayoutForCheck




由于水平有限，如果文中存在错误之处，请大家批评指正，欢迎大家一起来分享、探讨！

博客：http://blog.csdn.net/MingHuang2017

GitHub：https://github.com/MingHuang1024

Email： MingHuang1024@foxmail.com

ang1024)

Email： MingHuang1024@foxmail.com

微信：724360018

MingHuang1024
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react的滑动图片验证码组件的示例代码
12-03
业务需求，需要在系统登陆的时候，使用“滑动图片验证码”，来验证操作的不是机器人。 效果图 使用方式 在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。 class App extends Component { state = { url: "" } componentDidMount() { this.setState({ url: getImage() }) } onReload = () => { this.setState({ url: getImage() }) } render() { r
2022-06-01 学习记录--React-简易滑动验证之react组件(react-simple-verify)
weixin_48850734的博客
06-02 2144
React-简易滑动验证之react组件(react-simple-verify)
【Vue3】滑动验证组件 | 滑动验证
此人太懒，没有任何简介
05-21 5400
前言 前端验证方式（bwrs） 人为滑动轨迹参考 当我们用手滑动验证滑块时，滑动轨迹为变速曲线运动，上下起伏分布不均、且变速运动。如下图3图 图1 图2 图3 人为/人机/脚本滑动判断 滑动滑块所用时间低于50毫秒判断为人机/脚本，200px的滑块，人为滑动没那么快。 判断滑动的线条起伏，若是纯直线，则为人机，因为人为滑动没那么直。 计算滑动速度，人为滑动肯定是变速滑动，若是匀速滑动则为人机。 若不是人为滑动，多数是直线匀速滑动，不会上下起伏。例如脚本滑动。 但部分机器/脚本可以模拟人
Axure设计之滑动验证组件（动态面板）
招风的黑耳CSDN
06-27 2128
Axure原型设计之拖动滑块验证组件
React/Umi中实现移动端滑动图片验证功能
weixin_62889848的博客
03-08 961
React/Umi中实现移动端滑动图片验证功能
安卓自定义控件相关-android实现滑动控制速度控制各种布局自定义组件.rar
07-29
android实现滑动控制、速度控制、各种布局、自定义组件.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
captcha：行为验证码（滑动拼图，点选文字），前放置（java）交互，包含h5AndroidIOSflutteruni-app的源码和实现
02-06
://captcha.anji-plus.com/1.2在线文档： : 1.3微信小程序和H5在线体验（基于uni-app实现）如果图片正常显示，可查看码云，和github同步 微信小程序Demo uni-app H5演示2功能概述2.1组件介绍行为验证码采用嵌入式...
flutter_smart_select:SmartSelect允许您使用各种选择输入（例如单选，复选框，开关，芯片或什至自定义输入）轻松地将通常的表单选择或下拉列表转换为动态页面，弹出对话框或滑动底页。 支持单选和多选
05-02
SmartSelect允许您使用各种选择输入（例如单选，复选框，开关，芯片或什至自定义输入）轻松地将通常的表单选择或下拉列表转换为动态页面，弹出对话框或滑动底页。 支持单选和多选。 受到Smart Select组件的启发。 4....
纯JS实现图片验证码功能并兼容IE6-8(推荐)
11-28
　使用特别简单，定义一个DIV一验证码输入框，引入下载的js插件，创建一个GVerify对象，参数可以自定义一些或者传入DIV的ID。这样就生成了一验证码，效果见下图1-1. <!DOCTYPE html> <html>
微信小程序电商实战课程SpringBoot2+Vue3(85到96讲)
最新发布
04-09
微信小程序端涵盖了axios异步请求，Promise应用，swiper组件，自定义组件，应用了微信小程序提供的登录，支付，地址管理，包括下拉滑动分页，less应用，以及结合SpringBoot后端实现了企业级微信小程序支付功能，...
Vue中如何进行表单验证码与滑动验证？
Java徐师兄的博客
06-16 2016
本文介绍了如何使用Vue和库来实现表单验证码和滑动验证功能。我们首先使用npm安装了库，并在Vue中注册了和组件。然后，我们通过组件实现了表单验证码，通过组件实现了滑动验证。希望本文能够帮助你在Vue项目中实现表单验证码和滑动验证功能。
react实现图形验证码_基于react的滑动图片验证码组件
weixin_39874795的博客
02-11 2174
业务需求，需要在系统登陆的时候，使用“滑动图片验证码”，来验证操作的不是机器人。效果图使用方式在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。class App extends Component {state = {url: ""}componentDidMount() {this.setState({ url: getImage() })}onReload = ()...
React滑块控制按钮
weixin_66127892的博客
03-21 1428
tsx： import { Component } from "react"; import './index.less'; interface Props { } interface State { Num: number, MaxNum: number, // arr:con[] // isActive:aa[] } // interface con{ // id:number, // content:number // } // interface aa{ // i
【react+ts】react+ts实现双滑块移动效果，包含交叉和碰撞
weixin_42582523的博客
12-15 1280
import React, { Component } from "react"; import "./block.scss"; interface Props {} interface state { left1: number; left2: number; maxWidth: number; } class BlockDrog extends Component<Props, state> { slideButton1: any = React.createRef().
若依之集成aj-captcha实现滑块验证码空指针异常解决方案
一个人的博客
10-18 1593
若依前后端分离版集成aj-captcha实现滑块验证码空指针异常解决方案
一款小而美的开源滑动验证码组件
趣谈前端
12-08 488
hi, 大家好, 我是徐小夕, 今天给大家分享一款非常有意思的开源组件, 可以实现我们平时开发中的滑动验证码需求, 当然也是技术圈小伙伴奋战了无数个黑夜和白天的结果, 值得好好推荐一下.react-rotate-captcha 是一款开箱即用的滑动验证码 React 组件，基于 isszz/rotate-captcha 做的二次开发；结合了腾讯防水墙，增加安全策略.具体策略由两部分组成：polic...
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
趣谈前端
12-06 1500
前言hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。本文是 100+前端几何学应用案例 专栏的第五篇文章, 之前和大家分享了如何从零实现几何画板以及几何画板的撤销 / 重做 / 图层管理等功能:几何学在前端边界计算中的应用和原理分析前端图形学实战: 从零开发几何画板(vue3 + vite版)前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)前端...
【Vue实用功能】vue滑块组件验证
热门推荐
weixin_44590591的博客
04-26 1万+
vue滑块验证，图片验证，图片旋转验证，滑动验证 注：Vue3均使用按需引入 1、 基本滑块验证组件 // 安装 npm i vue-drag-verify2 -S // 引用： main.js 中引用 import Vue from 'vue' import dragVerify from 'vue-drag-verify2' Vue.use(dragVerify) <template> <div> <h3>模块验证：</h3>
vue3.2+ 滑动验证组件，pc/手机通用，即插即用
iamlujingtao的博客
05-13 2843
支持vue3.2+语法、支持typescript、支持pc/手机（自动适配）、即插即用的vue3.2+ 滑动验证组件
vue-drag-verify2自定义滑块验证成功时滑动的距离
06-09
vue-drag-verify2 是一个基于 Vue.js 的滑块验证码组件。当用户在滑块上完成拖拽操作后，组件会触发 success 事件，你可以在回调函数中获取拖拽的距离。 具体来说，你可以在 success 事件的回调函数中，通过参数 $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值