wo-slider是一款支持高度自定義的滑塊驗(yàn)證組件，采用uniapp-vue2編寫
采用touchstart、touchmove、touchend事件實(shí)現(xiàn)的滑塊組件,支持H5、微信小程序（其他小程序未試過，可自行嘗試）
可到插件市場(chǎng)下載嘗試： https://ext.dcloud.net.cn/search?q=wo-slider文章來源：http://www.zghlxwxcb.cn/news/detail-722938.html
- 使用示例
文章來源地址http://www.zghlxwxcb.cn/news/detail-722938.html
<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;">
插槽：滑道-成功態(tài)內(nèi)容
</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;">
插槽：滑道-初始態(tài)內(nèi)容
</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;">??滑動(dòng)解鎖大禮包</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;">
根據(jù)接口判斷驗(yàn)證通過
</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;">
根據(jù)接口判斷驗(yàn)證失敗
</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: '無(wú)邊框方塊滑道',
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: '無(wú)邊框圓角滑道',
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('滑動(dòng)完成', e);
this.resetFuncList.push(e.resetFunc)
},
onFinishSuccess(e) {
this.resetFuncList.push(e.resetFunc)
this.content = '??驗(yàn)證成功'
},
clickEvent() {
this.resetFuncList.forEach((item) => {
item()
})
this.content = ''
},
onFinishOne(e) {
this.resetFuncList.push(e.resetFunc)
this.loadingOne = true
this.resOne = '?驗(yàn)證中...'
setTimeout(()=> {
this.signOne = true
this.loadingOne = false
this.resOne = '?驗(yàn)證成功'
}, 3000)
},
onFinishTwo(e) {
this.resetFuncList.push(e.resetFunc)
this.loading = true
this.res = '?驗(yàn)證中...'
setTimeout(()=> {
this.sign = false
this.loading = false
this.res = '?驗(yàn)證失敗'
}, 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>
到了這里，關(guān)于uniapp-vue2-微信小程序-滑塊驗(yàn)證組件wo-slider的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
