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.rhkb.cn/news/104887.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈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…
阅读更多...
1267. 统计参与通信的服务器

1267. 统计参与通信的服务器

题目描述&#xff1a; 这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请你统计并返回能…
阅读更多...
工控机驱动自助检票机，打造轨道交通的智慧未来！

工控机驱动自助检票机，打造轨道交通的智慧未来！

随着城市化进程的加速和人口的不断增长&#xff0c;城市轨道交通建设正日益成为解决交通拥堵、提高交通工作效率的重要举措。然而&#xff0c;仅仅依靠传统的交通设施已经无法满足城市发展的需求&#xff0c;轨道交通智能系统建设成为了不可忽视的发展趋势。 AFC&#xff0c;即…
阅读更多...
Git gui教程---第八篇 Git gui的使用 创建一个分支

Git gui教程---第八篇 Git gui的使用 创建一个分支

一般情况下一个主分支下代码稳定的情况下会新建出一个分支&#xff0c;然后在分支上修改&#xff0c;修改完成稳定后再合并到主分支上。 或者几个人合作写一份代码&#xff0c;每个人各一个分支&#xff0c;测试稳定再合并到主分支上。 在git gui选择菜单栏“分支”&#xff0…
阅读更多...
Linux之套接字UDP实现网络通信

Linux之套接字UDP实现网络通信

Linux之套接字UDP实现网络通信 文章目录 Linux之套接字UDP实现网络通信1.引言2.具体实现2.1需要知道的套接字接口1.socket()2.bind()3.recvfrom()4.sendto() 2.2服务器端server.hpp2.3服务器端server.cc2.4客户端Client.cc 1.引言 ​ 套接字(Socket)是计算机网络中实现网络通信…
阅读更多...
docker安装clickhouse

docker安装clickhouse

安装 docker安装 创建clickhouse目录 mkdir -P /data/clickhouse/datamkdir -P /data/clickhouse/confmkdir -P /data/clickhouse/log 拉取镜像 这里直接拉取最新镜像, 如果需要某个特定版本, 则再拉取的时候指定版本号即可. docker pull clickhouse/clickhouse-server 启动临…
阅读更多...
Springboot实现ENC加密

Springboot实现ENC加密

Springboot实现ENC加密 1、导入依赖2、配置加密秘钥&#xff08;盐&#xff09;3、获取并配置密文4、重启项目测试5、自定义前缀、后缀6、自定义加密方式 1、导入依赖 关于版本&#xff0c;需要根据spring-boot版本&#xff0c;自行修改 <dependency><groupId>co…
阅读更多...
STM32 CubeMX （第四步Freertos内存管理和CPU使用率）

STM32 CubeMX （第四步Freertos内存管理和CPU使用率）

STM32 CubeMX STM32 CubeMX &#xff08;第四步Freertos内存管理和CPU使用率&#xff09; STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用STM32 CubeMX 库&#xff0c;配置Fr…
阅读更多...
java maven项目打jar包发布（精简版）

java maven项目打jar包发布（精简版）

目录 一、maven打包 二、安装jdk环境 三、安装mysql 四、jar包传输到服务器 一、maven打包 先clean再package target文件夹下面有生成一个jar包 二、安装jdk环境 1、下载jdk cd /usr/local wget https://repo.huaweicloud.com/java/jdk/8u201-b09/jdk-8u201-linux-x64.tar.…
阅读更多...
RocketMQ消息存储

RocketMQ消息存储

一、存储介质 ● 关系型数据库DB Apache下开源的另外一款MQ—ActiveMQ (默认采用的KahaDB做消息存储)可选用JDBC的方式来做消息持久化&#xff0c;通过简单的xmI配置信息即可实现JDBC消息存储。由于&#xff0c;普通关系型数据库(如Mysql)在单表数据量达到千万级别的情况下&a…
阅读更多...
uniapp小程序位置信息配置

uniapp小程序位置信息配置

uniapp 小程序获取当前位置信息报错 报错信息&#xff1a; getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json 需要在manifest.json配置文件中进行配置&#xff1a;
阅读更多...
期权是什么?期权的优缺点是什么?

期权是什么?期权的优缺点是什么?

期权是一种合约&#xff0c;有看涨期权和看跌期权两种类型&#xff0c;也就是做多和做空两个方向&#xff0c;走势标的物对应大盘指数&#xff0c;这也是期权与其他金融工具的主要区别之一&#xff0c;可以用于套利&#xff0c;对冲股票和激进下跌的风险&#xff0c;下文介绍期…
阅读更多...
安全（权限）框架Shiro概述及原理

安全（权限）框架Shiro概述及原理

1.1 Shiro是什么 Apache Shiro是一个功能强大且易于使用的Java安全&#xff08;权限&#xff09;框架。Shiro可以完成&#xff1a;认证、授权、加密、会话管理、与Web集成、缓存 等。借助Shiro您可以快速轻松地保护任何应用程序——从最小的移动应用程序到最大的Web和企业应用…
阅读更多...
opencv 水果识别+UI界面识别系统，可训练自定义的水果数据集

opencv 水果识别+UI界面识别系统，可训练自定义的水果数据集

目录 一、实现和完整UI视频效果展示 主界面&#xff1a; 测试图片结果界面&#xff1a; 自定义图片结果界面&#xff1a; 二、原理介绍&#xff1a; 图像预处理 HOG特征提取算法 数据准备 SVM支持向量机算法 预测和评估 完整演示视频&#xff1a; 完整代码链接 一、…
阅读更多...
MyBatis分页思想和特殊字符

MyBatis分页思想和特殊字符

目录 一、MyBatis分页思想 1.1 使用场景 1.2 代码演示 二、MyBatis特殊字符 2.1代码演示 一、MyBatis分页思想 1.1 使用场景 Mybatis分页应用场景&#xff1a; MyBatis是一个Java持久层框架&#xff0c;它提供了一种将SQL查询和结果映射到Java对象的简单方式。分页是MyBa…
阅读更多...
金融学博迪第4章作业

金融学博迪第4章作业

金融学第四章作业题目 1.推导名义利率i、实际利率r与通货膨胀率ρ之间的关系式。 注：名义利率（nominal interest rate）用in表示，实际利率（real interest rate）用ir表示，通货膨胀率用ρ表示。 答：假设现在用 元购买价格为 的商品，可以得到个 单位商品。如果推迟至一…
阅读更多...
GitLab-CI 指南

GitLab-CI 指南

GitLab CI 指南 前置工作 部署GitLab 部署GitLab-Runner 注册Runner到GitLab docker exec -it gitlab-runner bash # 进入容器 gitlab-runner register #调用register命令开始注册 # 在Gitlab Setting中找到Runners，如下图所示Enter the GitLab instance URL (for example, …
阅读更多...
Linux下的系统编程——vim/gcc编辑（二）

Linux下的系统编程——vim/gcc编辑（二）

前言&#xff1a; 在Linux操作系统之中有很多使用的工具&#xff0c;我们可以用vim来进行程序的编写&#xff0c;然后用gcc来生成可执行文件&#xff0c;最终运行程序。下面就让我们一起了解一下vim和gcc吧 目录 一、vim编辑 1.vim的三种工作模式 2.基本操作之跳转字符 &a…
阅读更多...
Unity ProBuilder SetUVs 不起作用

Unity ProBuilder SetUVs 不起作用

ProBuilder SetUVs 不起作用 &#x1f41f; 需要设置face.manulUV true public static void Set01UV(this ProBuilderMesh mesh){foreach (var face in mesh.faces){face.manualUV true;//设置为手动uv}var vertices mesh.GetVertices().Select(v > v.position).ToArray(…
阅读更多...
kubernetes--技术文档-真--集群搭建-三台服务器一主二从（非高可用）附属文档-使用不同运行商服务器-搭建公网集群

kubernetes--技术文档-真--集群搭建-三台服务器一主二从（非高可用）附属文档-使用不同运行商服务器-搭建公网集群

&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;版本&#xff01;&#xff01;&#xff01;&#xff01; 使用公网初始化 Kubernetes 需要 Kubernetes 版本 1.19 或更高版本。在早期的版本中&#xff0c;Kubernetes 还不支持公网初始化。因此&#xff0c;请确保…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发