当前位置： 首页 > news >正文

uniapp-滑块验证组件wo-slider

news 2025/8/18 15:37:00

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.lryc.cn/news/135989.html

相关文章：

  • NPM 管理组织成员
  • 设计模式（3）抽象工厂模式
  • 【C++】早绑定、析构与多态 | 一道关于多态的选择题记录
  • mac下安装tomcat
  • 【小梦C嘎嘎——启航篇】string常用接口的模拟实现
  • 【Jenkins】持续集成部署学习
  • Redis数据结构之List
  • SpringCloud Alibaba实战和源码（7）Skywalking
  • MySQL索引可能失效之or、is null、is not null、不等于(!=,＜＞)、联合索引
  • 无人机电力巡检：探索电力设施维护的新模式
  • ethers.js1：ethers的安装和使用
  • 小程序中的页面配置和网络数据请求
  • 使用ImageMagick实现多张图片拼接为gif(多线程版)
  • 解释 RESTful API，以及如何使用它构建 web 应用程序。
  • 远程端口转发 实践 如何将物理机某一端口的服务转发到vps上，使得外网能访问到
  • 【uniapp 监听键盘弹起与收回】
  • 【Unity】如何制作小地图
  • 基于IMX6ULLmini的linux裸机开发系列八：按键处理实验
  • 数据结构好题总结
  • Java串口开发
  • Python nohup 启动python脚本，后台没有日志
  • 完美解决微信小程序使用复选框van-checkbox无法选中
  • IDEA报错：类文件具有错误的版本 61.0,应为52.0
  • Linux 挂载局域网内共享目录
  • FFmpeg解码32k大分辨率出现如下错误：Picture size 32768x32768 is invalid
  • EasyExcel+POI制作带有有效性校验及下拉联动的Excel模板
  • Unity怎么制作魔法火焰特效？Unity制作魔法火焰特效方法
  • 双基证券：房地产基本面仍处下行通道 政策有望促进走稳
  • 31、springboot 配置HTTP服务端口及如何通过WebServer实例动态获取项目中的HTTP端口
  • 会计如何使用ChatGPT提高工作效率