uniapp-滑块验证组件wo-slider
wo-slider是一款支持高度自定义的滑块验证组件,采用uniapp-vue2编写
采用touchstart、touchmove、touchend事件实现的滑块组件,支持H5、微信小程序(其他小程序未试过,可自行尝试)
可到插件市场下载尝试: https://ext.dcloud.net.cn/search?q=wo-slider
- 使用示例
<template><view style="height: 100vh;font-size: 12rpx;margin-top: 20px;"><view v-for="(item, index) in compOptions" :key="index" style="display: flex; justify-content: center; align-items: center;padding: 10px;"><view style="width: 400rpx;"><view style="margin-bottom: 10px; text-align: center;">{{ item.title }}</view><wo-slider:height="item.height":round="item.round":border="item.border":slider-size="item.sliderSize"@slideFinish="onFinish"></wo-slider></view></view><view style="display: flex; justify-content: center; align-items: center; padding: 10px;"><view><view style="margin-bottom: 10px; text-align: center;">外边框有间隙滑块</view><view style="border: 1rpx solid #DEE1E6; padding: 16rpx; border-radius: 80rpx;width: 400rpx;"><wo-slider @slideFinish="onFinish" :round="{show: true, style: '80rpx'}"><template v-slot:begin><view style="background-color: #E5673B; height: 100%; display: flex; justify-content: center; align-items: center"><image style="height: 50rpx;width: 50rpx;" src="/static/right.png" alt="logo"></image></view></template><template v-slot:end><view style="background-color: #1BA035; height: 100%; display: flex; justify-content: center; align-items: center"><image style="height: 50rpx;width: 50rpx;" src="../../static/select-bold.png"></image></view></template></wo-slider></view></view></view><view style="display: flex; justify-content: center; align-items: center; padding: 10px;"><view style="width: 400rpx;"><view style="margin-bottom: 10px; text-align: center;">插槽:自定义滑块</view><wo-slider @slideFinish="onFinish" :round="{show: true, style: '10rpx'}"><template v-slot:begin><view style="background-color: #E5673B; height: 100%; display: flex; justify-content: center; align-items: center"><image style="height: 50rpx;width: 50rpx;" src="/static/wow.png"></image></view></template><template v-slot:end><view style="background-color: #1BA035; height: 100%; display: flex; justify-content: center; align-items: center"><image style="height: 50rpx;width: 50rpx;" src="/static/smile.png"></image></view></template></wo-slider></view></view><view style="display: flex; justify-content: center; align-items: center; padding: 10px;"><view style="width: 400rpx;"><view style="margin-bottom: 10px; text-align: center;">插槽:滑道-成功态内容</view><wo-slider@slideFinish="onFinishSuccess" :round="{show: true, style: '10rpx'}"><template v-slot:isFinished><view style="height: 100%;background-color: #65B58A; color: #fff; display: flex; justify-content: center;align-items: center;"><view>{{content}}</view></view></template></wo-slider></view></view><view style="display: flex; justify-content: center; align-items: center; padding: 10px;"><view style="width: 400rpx;"><view style="margin-bottom: 10px; text-align: center;">插槽:滑道-初始态内容</view><wo-slider @slideFinish="onFinish" :round="{show: true, style: '10rpx'}"><template v-slot:init><view style="background-color: #107BBA; color: #fff; height: 100%; display: flex; justify-content: center;align-items: center;">😀滑动解锁大礼包</view></template></wo-slider></view></view><view style="display: flex; justify-content: center; align-items: center; padding: 10px;"><view style="width: 400rpx;"><view style="margin-bottom: 10px; text-align: center;">根据接口判断验证通过</view><wo-slider@slideFinish="onFinishOne" :round="{show: true, style: '10rpx'}"><template v-slot:isFinished><view :style="{backgroundColor: loadingOne ? '#709bff' : signOne ? '#65B58A' : '#ed9576'}" style="height: 100%; color: #fff; display: flex; justify-content: center;align-items: center;"><view>{{resOne}}</view></view></template><template v-slot:begin><view style="background-color: #E5673B; height: 100%; display: flex; justify-content: center; align-items: center"><image style="height: 30rpx;width: 30rpx;" src="@/static/arrow-double-right.png"></image></view></template><template v-slot:end><view :style="{backgroundColor: loadingOne ? '#3370FF' : signOne ? '#1BA035' : '#E23E31'}" style=" height: 100%; display: flex; justify-content: center; align-items: center"><view class="spinner" v-if="loadingOne"><view class="double-bounce1"></view><view class="double-bounce2"></view></view><image v-else style="height: 30rpx;width: 30rpx;" :src="signOne ? successImg : closeImg"></image></view></template></wo-slider></view></view><view style="display: flex; justify-content: center; align-items: center; padding: 10px;"><view style="width: 400rpx;"><view style="margin-bottom: 10px; text-align: center;">根据接口判断验证失败</view><wo-slider@slideFinish="onFinishTwo" :round="{show: true, style: '10rpx'}"><template v-slot:isFinished><view :style="{backgroundColor: loading ? '#709bff' : sign ? '#65B58A' : '#ed9576'}" style="height: 100%; color: #fff; display: flex; justify-content: center;align-items: center;"><view>{{res}}</view></view></template><template v-slot:begin><view style="background-color: #E5673B; height: 100%; display: flex; justify-content: center; align-items: center"><image style="height: 50rpx;width: 50rpx;" src="@/static/right.png"></image></view></template><template v-slot:end><view :style="{backgroundColor: loading ? '#3370FF' : sign ? '#1BA035' : '#E23E31'}" style=" height: 100%; display: flex; justify-content: center; align-items: center"><view class="spinner" v-if="loading"><view class="double-bounce1"></view><view class="double-bounce2"></view></view><image v-else style="height: 50rpx;width: 50rpx;" :src="sign ? successImg : closeImg"></image></view></template></wo-slider></view></view><view style="padding-top: 100rpx;"><button @click="clickEvent">重置</button></view></view>
</template><script>import refreshImg from '../../static/refresh.png'import closeImg from '../../static/close.png'import successImg from '../../static/select-bold.png'export default {data() {return {content: '',res: '',loading: true,sign: false,resOne: '',loadingOne: true,signOne: false,resetFuncList: [],refreshImg: refreshImg,closeImg: closeImg,successImg: successImg,compOptions: [{title: '边框方块滑道',height: 60,sliderSize: 60,width: 400,round: {show: true, style: "0rpx"},border: {show: true, style: '1rpx solid blue'}},{title: '无边框方块滑道',height: 60,sliderSize: 80,width: 400,round: {show: true, style: "10rpx"},border: {show: false, style: ''},},{title: '边框圆角滑道',height: 60,sliderSize: 60,width: 400,round: {show: true, style: "20rpx"},border: {show: true, style: '1rpx solid blue'}},{title: '无边框圆角滑道',height: 60,sliderSize: 80,width: 400,round: {show: true, style: "30rpx"},border: {show: false, style: ''}},{title: '大圆角滑道',height: 80,sliderSize: 80,width: 500,round: {show: true, style: "40rpx"},border: {show: false, style: ''}}]}},methods: {onFinish(e) {console.log('滑动完成', e);this.resetFuncList.push(e.resetFunc)},onFinishSuccess(e) {this.resetFuncList.push(e.resetFunc)this.content = '😊验证成功'},clickEvent() {this.resetFuncList.forEach((item) => {item()})this.content = ''},onFinishOne(e) {this.resetFuncList.push(e.resetFunc)this.loadingOne = truethis.resOne = '⏳验证中...'setTimeout(()=> {this.signOne = truethis.loadingOne = falsethis.resOne = '✅验证成功'}, 3000)},onFinishTwo(e) {this.resetFuncList.push(e.resetFunc)this.loading = truethis.res = '⏳验证中...'setTimeout(()=> {this.sign = falsethis.loading = falsethis.res = '⚠验证失败'}, 3000)}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}.spinner {width: 20px;height: 20px;position: relative;margin: 100px auto;}.double-bounce1, .double-bounce2 {width: 100%;height: 100%;border-radius: 50%;background-color: #fff;opacity: 0.6;position: absolute;top: 0;left: 0;-webkit-animation: sk-bounce 2.0s infinite ease-in-out;animation: sk-bounce 2.0s infinite ease-in-out;}.double-bounce2 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}@-webkit-keyframes sk-bounce {0%, 100% { -webkit-transform: scale(0.0) }50% { -webkit-transform: scale(1.0) }}@keyframes sk-bounce {0%, 100% { transform: scale(0.0);-webkit-transform: scale(0.0);} 50% { transform: scale(1.0);-webkit-transform: scale(1.0);}}
</style>
相关文章:

uniapp-滑块验证组件wo-slider
wo-slider是一款支持高度自定义的滑块验证组件,采用uniapp-vue2编写 采用touchstart、touchmove、touchend事件实现的滑块组件,支持H5、微信小程序(其他小程序未试过,可自行尝试) 可到插件市场下载尝试: https://ext.…...

NPM 管理组织成员
目录 1、向组织添加成员 1.1 邀请成员加入您的组织 1.2 撤销组织邀请 2、接收或拒接组织邀请 2.1 接收组织邀请 2.2 拒绝组织邀请 3、组织角色和权限 4、管理组织权限 5、从组织中删除成员 1、向组织添加成员 作为组织所有者,您可以将其他npm用户添加到…...
设计模式(3)抽象工厂模式
一、概述: 1、提供一个创建一系列相关或相互依赖对象的接口,而无须指定它们具体的类。 2、结构图: 3、举例代码: (1) 实体: public interface IUser {public void insert(User user);public…...

【C++】早绑定、析构与多态 | 一道关于多态的选择题记录
今天在和群友聊天的时候看到了一道很坑的题目,分享给大家 1.看题! 先来看看题目 struct Dad { public:Dad(){ echo();}~Dad(){ echo();}virtual void echo() {cout << "DAD ";} };struct Son:Dad { public:void echo() const override…...
mac下安装tomcat
1. 官网下载Apache Tomcat - Apache Tomcat 9 Software Downloads 2. 授权bin目录下所有.sh文件权限sudo chmod 755 *.sh 3. 启动程序(后台运行) sudo sh ./startup.sh 4. 在当前窗口启动程序,随时看到日志sudo sh ./catalina.sh run 5. 关闭程序 sudo sh ./shu…...

【小梦C嘎嘎——启航篇】string常用接口的模拟实现
【小梦C嘎嘎——启航篇】string常用接口的模拟实现😎 前言🙌string 模拟实现1、iterator 迭代器相关使用函数实现2、构造函数接口实现3、 传统写法——拷贝构造函数接口实现4、 现代写法——拷贝构造函数接口实现5、析构函数接口实现6、传统写法—— 赋…...

【Jenkins】持续集成部署学习
【Jenkins】持续集成部署学习 【一】安装部署【1】Jenkins所处位置【2】Docker安装Gitlab(1)首先准备一台空的虚拟机服务器(2)安装服务器所需的依赖(3)Docker的安装(4)阿里云镜像加速…...

Redis数据结构之List
Redis 中列表(List)类型是用来存储多个有序的字符串,列表中的每个字符串成为元素 Eelement),一个列表最多可以存储 2^32-1 个元素。 在 Redis 中,可以对列表两端插入(push)和弹出&am…...

SpringCloud Alibaba实战和源码(7)Skywalking
什么是SkyWalking Skywalking是由国内开源爱好者吴晟开源并提交到Apache孵化器的产品,它同时吸收了Zipkin /Pinpoint /CAT 的设计思路。特点是:支持多种插件,UI功能较强,支持非侵入式埋点。目前使用厂商最多,版本更新较…...
MySQL索引可能失效之or、is null、is not null、不等于(!=,<>)、联合索引
1、如果 A,B 两列都有索引,那么 select * from Table where Aa or Bb; 会走索引吗? 答案:会,因为 A,B都有索引; 2、如果 A,B有索引,但是C没有索引; select * from Table where Aa or Bb …...

无人机电力巡检:探索电力设施维护的新模式
电力巡检一直是电力行业中关键的环节,它的目的是确保电力设施的正常运行和安全稳定,对提高电力设施的可靠性、确保电力供应的稳定性和提高电力企业的管理水平具有重要的意义。传统的电力巡检方式通常采用人工的方式进行,这种方式存在很多的问…...

ethers.js1:ethers的安装和使用
ethers官方文档:Documentation 1、ethers简介: ethers.js是一个完整而紧凑的开源库,用于与以太坊区块链及其生态系统进行交互。如果你要写Dapp的前端,你就需要用到ethers.js。 与更早出现的web3.js相比,它有以下优点…...

小程序中的页面配置和网络数据请求
页面配置文件和常用的配置项 1.在msg.json中配置window中的颜色和背景色 "navigationBarBackgroundColor": "#efefef","navigationBarTextStyle": "black" 2.可以看到home中的没有发生变化但是msg的发生变化了,这个和前面的…...
使用ImageMagick实现多张图片拼接为gif(多线程版)
官网: https://imagemagick.org/ 直接上代码 ExecutorService es Executors.newFixedThreadPool(10); List<File> images getImageFiles(sceneDir); CountDownLatch cdl new CountDownLatch(images.size()); // 拷贝图片 for (File file : images) {System.out.prin…...
解释 RESTful API,以及如何使用它构建 web 应用程序。
RESTful API是一种利用HTTP协议进行通信的Web API设计风格,它采用了一组统一且可缓存的操作,包括GET、POST、PUT、DELETE等,通过URL来定位资源,以及使用JSON、XML等格式来传输数据,以实现系统之间的数据交互和资源共享…...

远程端口转发 实践 如何将物理机某一端口的服务转发到vps上,使得外网能访问到
以本机1470端口(我的sqli-labs)与vps的9023端口为例。 SSH基本的连接命令是: ssh usernamehostname这里牵扯到了两台主机,一是执行命令、运行SSH客户端的主机,我们称为本地主机A【Host A】;二是接收连接请…...
【uniapp 监听键盘弹起与收回】
在uniapp中,可以通过使用小程序提供的API来监听键盘弹起与收回。 首先,在页面的onLoad函数中注册监听事件: onLoad() {uni.onKeyboardHeightChange(this.onKeyboardHeightChange); },然后,在页面的onUnload函数中取消注册监听事…...

【Unity】如何制作小地图
我们为什么要制作小地图呢? 原因很简单: 导航和定位:小地图可以显示玩家当前位置以及周围环境的概览。这使得玩家能够更好地导航和定位自己在游戏中的位置,找到目标或避开障碍物。场景了解:通过小地图,玩…...

基于IMX6ULLmini的linux裸机开发系列八:按键处理实验
目录 GIC相关寄存器 GPIO中断相关寄存器 中断服务函数表 中断向量表偏移位置 make有报错 解决方法:error: for loop initial declarations are only allowed in C99 mode_‘for’ loop initial declarations are only allowed i_Young_2717的博客-CSDN博客 GIC…...
数据结构好题总结
Cut Inequality Down 题解 https://blog.csdn.net/lzh_naive/article/details/103340568 概括:st表倍增类st表 考虑如果没有UL限制的话,相当于是前缀和 我们发现,如果某次到了U/L(相当于是一次碰壁)那么这个值已知…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要: 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式(自动驾驶、人工驾驶、远程驾驶、主动安全),并通过实时消息推送更新车…...

手机平板能效生态设计指令EU 2023/1670标准解读
手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读,综合法规核心要求、最新修正及企业合规要点: 一、法规背景与目标 生效与强制时间 发布于2023年8月31日(OJ公报&…...
在 Spring Boot 项目里,MYSQL中json类型字段使用
前言: 因为程序特殊需求导致,需要mysql数据库存储json类型数据,因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

Mysql故障排插与环境优化
前置知识点 最上层是一些客户端和连接服务,包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念,为通过安全认证接入的客户端提供线程。同样在该层上可…...

链式法则中 复合函数的推导路径 多变量“信息传递路径”
非常好,我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题,统一使用 二重复合函数: z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y)) 来全面说明。我们会展示其全微分形式(偏导…...
Python学习(8) ----- Python的类与对象
Python 中的类(Class)与对象(Object)是面向对象编程(OOP)的核心。我们可以通过“类是模板,对象是实例”来理解它们的关系。 🧱 一句话理解: 类就像“图纸”,对…...
用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章
用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章 摘要: 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言,受限于 C 语言本身的内存安全和并发安全问题,开发复杂模块极易引入难以…...

【Vue】scoped+组件通信+props校验
【scoped作用及原理】 【作用】 默认写在组件中style的样式会全局生效, 因此很容易造成多个组件之间的样式冲突问题 故而可以给组件加上scoped 属性, 令样式只作用于当前组件的标签 作用:防止不同vue组件样式污染 【原理】 给组件加上scoped 属性后…...