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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/48950.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Docker搭建个人网盘、私有仓库

Docker搭建个人网盘、私有仓库

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘 [rootlocalhost ~]# docker pull mysql:5.6 [rootlocalhost ~]# docker pull owncloud [rootlocalhost ~]# docker run -itd --name mysql --env MYSQL_ROOT_PASSWORD123456 mysql:5.6 [rootlocalhost ~]# doc…
阅读更多...
RESTful API，以及如何使用它构建 web 应用程序

RESTful API，以及如何使用它构建 web 应用程序

RESTful API是一种基于HTTP协议的API设计风格&#xff0c;它的核心思想是将资源作为 API 的核心&#xff0c;使用 HTTP 的 GET、POST、PUT、DELETE 等方法对这些资源进行操作&#xff0c;并通过 URL 来定位资源。 RESTful API的特点包括&#xff1a; 资源是 API 的核心使用 H…
阅读更多...
【LeetCode-经典面试150题-day12】

【LeetCode-经典面试150题-day12】

20.有效的括号 题意&#xff1a; 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括…
阅读更多...
共享休闲娱乐空间：打造多元化生活方式

共享休闲娱乐空间：打造多元化生活方式

共享茶室&#xff1a; 共享茶室为人们提供了一个安静、放松的环境&#xff0c;让人们可以品尝不同种类的茶叶&#xff0c;并享受到与他人分享茶文化的乐趣。共享茶室通常会提供专业的泡茶设备和茶具&#xff0c;让人们可以更好地体验泡茶的过程和仪式感。这种共享空间不仅让人们…
阅读更多...
Go的标准库Context理解

Go的标准库Context理解

作为一个才入门的菜鸟&#xff0c;还没写过真正的 go 项目&#xff0c;要理解这个 Context 还是有点难&#xff0c;不过还是要尝试一下。在 Go http包的Server中&#xff0c;每一个请求在都有一个对应的 goroutine 去处理。请求处理函数通常会启动额外的 goroutine 用来访问后端…
阅读更多...
会计术语英汉对照表 (包括术语详细介绍) | 会计英语

会计术语英汉对照表 (包括术语详细介绍) | 会计英语

对账&#xff08;checking&#xff09; 对应账户&#xff08;corresponding accounts&#xff09; 定期清查&#xff08;Periodic ckecking method&#xff09; 定期盘存制&#xff08;periodic inventory system&#xff09; 订本式账簿&#xff08;bound book&#x…
阅读更多...
【微服务】微服务调用原理及服务治理

【微服务】微服务调用原理及服务治理

本文通过图文结合&#xff0c;简要讲述微服务的调用原理&#xff0c;以及服务治理的相关概念。 1.微服务的调用原理 举个栗子&#xff1a;你去会所洗脚。首先&#xff0c;技师肯定要先去会所应聘&#xff0c;通过之后&#xff0c;会所会记录该技师的信息和技能&#xff0c;然后…
阅读更多...
PHP反序列化 字符串逃逸

PHP反序列化 字符串逃逸

前言 最近在打西电的新生赛&#xff0c;有道反序列化的题卡了很久&#xff0c;今天在NSS上刷题的时候突然想到做法&#xff0c;就是利用字符串逃逸去改变题目锁死的值&#xff0c;从而实现绕过 为了研究反序列化的字符串逃逸 我们先简单的测试下 原理 <?php class escape…
阅读更多...
带你了解SpringBoot---开启Durid 监控

带你了解SpringBoot---开启Durid 监控

文章目录 数据库操作--开启Durid 监控整合Druid 到Spring-Boot官方文档基本介绍Durid 基本使用代码实现 Durid 监控功能-SQL 监控需求:SQL 监控数据SQL 监控数据-测试页面 Durid 监控功能-Web 关联监控需求:Web 关联监控配置-Web 应用、URI 监控重启项目 Durid 监控功能-SQL 防…
阅读更多...
SOA通信中间件常用的通信协议

SOA通信中间件常用的通信协议

摘要&#xff1a; SOA&#xff08;面向服务的架构&#xff09;的软件设计原则之一是模块化。 前言 SOA&#xff08;面向服务的架构&#xff09;的软件设计原则之一是模块化。模块化可以提高软件系统的可维护性和代码重用性&#xff0c;并且能够隔离故障。举例来说&#xff0c;…
阅读更多...
【解决方案】VS Code无法导入自定义包

【解决方案】VS Code无法导入自定义包

【解决方案】VS Code无法导入自定义包 解决方案&#xff1a; 在项目根目录新建import_func.py&#xff0c;并输入一下内容&#xff1a; import os import re import sys def import_all():sys_file []wd os.getcwd()sys_file.append(wd)for root, dirs, files in os.walk(w…
阅读更多...
大语言模型微调实践——LoRA 微调细节

大语言模型微调实践——LoRA 微调细节

1. 引言 近年来人工智能领域不断进步&#xff0c;大语言模型的崛起引领了自然语言处理的革命。这些参数量巨大的预训练模型&#xff0c;凭借其在大规模数据上学习到的丰富语言表示&#xff0c;为我们带来了前所未有的文本理解和生成能力。然而&#xff0c;要使这些通用模型在特…
阅读更多...
ubuntu修改默认文件权限umask

ubuntu修改默认文件权限umask

最近在使用ubuntu的过程中发现一个问题&#xff1a; 环境是AWS EC2&#xff0c;登录用户ubuntu&#xff0c;系统默认的umask是027&#xff0c;修改/etc/profile文件中umask 027为022后&#xff0c;发现从ubuntu用户sudo su过去root用户登录查询到的umask还是027&#xff0c;而…
阅读更多...
LeetCode 面试题 01.07. 旋转矩阵

LeetCode 面试题 01.07. 旋转矩阵

文章目录 一、题目二、C# 题解 一、题目 给你一幅由 N N 矩阵表示的图像&#xff0c;其中每个像素的大小为 4 字节。请你设计一种算法&#xff0c;将图像旋转 90 度。 不占用额外内存空间能否做到&#xff1f; 点击此处跳转题目。 示例 1: 给定 matrix [ [1,2,3], [4,5,6], …
阅读更多...
直播系统源码协议探索篇（二）：网络套接字协议WebSocket

直播系统源码协议探索篇（二）：网络套接字协议WebSocket

上一篇我们分析了直播平台的会话初始化协议SIP&#xff0c;他关乎着直播平台的实时通信和多方互动技术的实现&#xff0c;今天我们来讲另一个协议&#xff0c;叫网络套接字协议WebSocket&#xff0c;WebSocket基于TCP在客户端与服务器建立双向通信的网络协议&#xff0c;并且可…
阅读更多...
Mysql的多表查询和索引

Mysql的多表查询和索引

MySQL 多表查询 当两个表查询时&#xff0c;从第一张表中取出一行和第二张表的每一行进行组合 返回结果含有两张表的所有列&#xff0c;一共返回的记录数第一张表行数*第二张表的行数&#xff08;笛卡尔积&#xff09; -- ?显示雇员名,雇员工资及所在部门的名字 【笛卡尔集…
阅读更多...
Redis性能测试实操记录与分析

Redis性能测试实操记录与分析

最近要查看redis的存储相关信息&#xff0c;这里做记录&#xff0c;分享下&#xff1a; 标题&#xff1a;Redis性能测试实操记录与分析 引言&#xff1a; Redis作为一种高速数据存储和缓存解决方案&#xff0c;被广泛应用于各种场景中。为了评估Redis在实际应用中的性能表现…
阅读更多...
基于swing的小区物业管理系统java jsp社区报修信息mysql源代码

基于swing的小区物业管理系统java jsp社区报修信息mysql源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于swing的小区物业管理系统 系统有1权限&#xff1…
阅读更多...
跨境出海：如何轻松应对多账号管理

跨境出海：如何轻松应对多账号管理

在如今的跨境电商时代&#xff0c;成功经营一个线上店铺不再仅仅需要商品和服务&#xff0c;还需要精通广告投放、营销策略等多个领域。 然而&#xff0c;老练的电商从业者知道&#xff0c;如果不重视平台账号的管理方法&#xff0c;可能会导致店铺或营销账号被关联&#xff0…
阅读更多...
Java面向对象三大特性之多态及综合练习

Java面向对象三大特性之多态及综合练习

1.1 多态的形式 多态是继封装、继承之后&#xff0c;面向对象的第三大特性。 多态是出现在继承或者实现关系中的。 多态体现的格式&#xff1a; 父类类型 变量名 new 子类/实现类构造器; 变量名.方法名(); 多态的前提&#xff1a;有继承关系&#xff0c;子类对象是可以赋…
阅读更多...
最新文章

Copyright @ 2022~2023