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

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;">
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/159377