uniapp-vue2-微信小程序-滑块验证组件wo-slider

已于 2024-02-21 11:35:28 修改
阅读量2.6k 收藏 7
点赞数 1
分类专栏： uniapp插件 文章标签： uni-app vue.js
于 2023-08-22 10:56:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42278240/article/details/132423428
版权

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 = true
				this.resOne = '⏳验证中...'
				setTimeout(()=> {
					this.signOne = true
					this.loadingOne = false
					this.resOne = '✅验证成功'
				}, 3000)
			},
			onFinishTwo(e) {
				this.resetFuncList.push(e.resetFunc)
				this.loading = true
				this.res = '⏳验证中...'
				setTimeout(()=> {
					this.sign = false
					this.loading = false
					this.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>
狼性书生
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
uni-app滑块视图容器（十一）
A_nanda的博客
06-26 413
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。组件中，宽高自动设置为100%。注意：宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开。一般用于左右滑动或上下滑动，比如banner轮播图。
微信小程序滑块验证方法
2401_84097658的博客
04-16 808
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。
uniapp滑动验证
LW0512的博客
07-21 1576
uniapp 滑动验证
uniapp滑块验证压缩包.rar
09-11
本文件适用于uniapp，中滑动滑块验证和依次点击字体验证，需要搭配本人文章结合了解，您可以将其视为一个组件放在项目中，请注意您的引入地址。
【uni-app】自定义-图形滑块验证码，后端php 的演示视频
05-14
【uni-app】自定义-图形滑块验证码，后端php 的演示视频
vue uniapp 统一验证码滑块验证
王二的博客
08-24 1910
滑块验证通用，适用与vue uniapp 小程序
马拉松报名系统微信小程序代码 - 小程序 - java - uniapp -springboot - 微信小程序 - 代码
01-11
马拉松报名系统微信小程序代码 | 小程序 | java | uniapp |springboot | 微信小程序 | 代码 1、技术栈：微信小程序，springboot，uniapp，vue，ajax，maven，mysql，MyBatisPlus 2、系统的实现 用户信息 图片素材 ...
uniapp框架-基于mpvue实现豆瓣电影微信小程序-uni-app项目源码-vue语法格式.zip
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
网上花店微信小程序代码 - 小程序 - java - uniapp -springboot - 微信小程序 - 代码
01-11
网上花店微信小程序代码 | 小程序 | java | uniapp |springboot | 微信小程序 | 代码 1、技术栈：微信小程序，springboot，uniapp，vue，ajax，maven，mysql，MyBatisPlus 2、系统的实现 用户信息 图片素材 视频...
uni 滑动验证码 css和验证组件.zip
11-13
uni 的滑动验证码的组件和css
wxmini-to-vue:微信小程序页面(组件) 转 vue 组件
05-23
小程序页面（组件）转Vue组件:comet:一个微信小程序页面组件转为Vue组件的库:zany_face: Installing$ npm install wxmini-to-vue:thinking_face: Exampleconst path = require('path')// 导入 wxmini-to-vueconst ...
戏曲文化微信小程序代码 - 小程序 - java - uniapp -springboot - 微信小程序 - 代码
01-11
戏曲文化微信小程序代码 | 小程序 | java | uniapp |springboot | 微信小程序 | 代码 1、技术栈：微信小程序，springboot，uniapp，vue，ajax，maven，mysql，MyBatisPlus 2、系统的实现 用户信息 图片素材 视频...
uniapp 滑动代码块 获取验证码
weixin_53484933的博客
03-04 820
整体的思路是让ui给你一个整图，然后抠出来一个滑块图，把深色的缺口图，随机放到某一个位置，用滑块的x轴数值去对比缺口的x值，可以留一些空间，验证通过就写别的方法，我这里的y轴是固定的，如果不想，可以试着改改。
uniapp滑动验证码
weixin_52707625的博客
07-12 1436
基于uni-app开发的滑动验证码组件
uniapp实现滑动图片验证
小发的博客
10-11 302
​​​​​uniapp实现滑动图片验证。
uni-app 拖动滑块验证（插件分享）
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
07-13 6855
插件地址：https://ext.dcloud.net.cn/plugin?id=573 效果预览： 作者：黄河爱浪QQ：1846492969，邮箱：helang.love@qq.com 公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。 更多精彩文章，请扫下方二维码关注我的公众号 ...
uniapp-vue3微信分享
最新发布
06-06
Uniapp是一款基于Vue.js框架的跨平台开发工具，可以将一个Vue项目同时打包成H5、小程序、App等多个平台的应用。而微信分享是小程序的一个常见功能，实现微信分享需要使用微信提供的JS-SDK，而在Uniapp中使用微信JS-SDK，需要进行以下步骤： 1. 在manifest.json文件中，配置好微信小程序的AppID。 2. 在需要使用微信分享的页面中，使用uni.getProvider()方法判断当前环境是否为微信小程序环境，如果是，则调用wx.config()方法进行JS-SDK的初始化。 3. 初始化完成后，使用wx.ready()方法监听JS-SDK是否准备完成，如果准备完成，则可以使用wx.updateAppMessageShareData()和wx.updateTimelineShareData()方法设置分享的标题、描述、链接和图片等信息。 4. 在用户点击分享按钮时，使用wx.showMenuItems()方法显示分享菜单，然后调用wx.onMenuShareAppMessage()和wx.onMenuShareTimeline()方法，进行分享操作。 相关问题： 1. 什么是Uniapp？ 2. 如何在Uniapp中实现微信分享？ 3. Uniapp还支持哪些平台的开发？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狼性书生

谢谢鼓励！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值