全面的锦州网站建设,wordpress插件不加载,wordpress模板 淘宝客,深圳注明企业网站设计wo-slider是一款支持高度自定义的滑块验证组件#xff0c;采用uniapp-vue2编写 采用touchstart、touchmove、touchend事件实现的滑块组件,支持H5、微信小程序#xff08;其他小程序未试过#xff0c;可自行尝试#xff09;
可到插件市场下载尝试#xff1a; https://ext.… wo-slider是一款支持高度自定义的滑块验证组件采用uniapp-vue2编写 采用touchstart、touchmove、touchend事件实现的滑块组件,支持H5、微信小程序其他小程序未试过可自行尝试
可到插件市场下载尝试 https://ext.dcloud.net.cn/search?qwo-slider
使用示例 templateview styleheight: 100vh;font-size: 12rpx;margin-top: 20px;view v-for(item, index) in compOptions :keyindex styledisplay: flex; justify-content: center; align-items: center;padding: 10px;view stylewidth: 400rpx;view stylemargin-bottom: 10px; text-align: center;{{ item.title }}/viewwo-slider:heightitem.height:rounditem.round:borderitem.border:slider-sizeitem.sliderSizeslideFinishonFinish/wo-slider/view/viewview styledisplay: flex; justify-content: center; align-items: center; padding: 10px;viewview stylemargin-bottom: 10px; text-align: center;外边框有间隙滑块/viewview styleborder: 1rpx solid #DEE1E6; padding: 16rpx; border-radius: 80rpx;width: 400rpx;wo-slider slideFinishonFinish :round{show: true, style: 80rpx}template v-slot:beginview stylebackground-color: #E5673B; height: 100%; display: flex; justify-content: center; align-items: centerimage styleheight: 50rpx;width: 50rpx; src/static/right.png altlogo/image/view/templatetemplate v-slot:endview stylebackground-color: #1BA035; height: 100%; display: flex; justify-content: center; align-items: centerimage styleheight: 50rpx;width: 50rpx; src../../static/select-bold.png/image/view/template/wo-slider/view/view/viewview styledisplay: flex; justify-content: center; align-items: center; padding: 10px;view stylewidth: 400rpx;view stylemargin-bottom: 10px; text-align: center;插槽自定义滑块/viewwo-slider slideFinishonFinish :round{show: true, style: 10rpx}template v-slot:beginview stylebackground-color: #E5673B; height: 100%; display: flex; justify-content: center; align-items: centerimage styleheight: 50rpx;width: 50rpx; src/static/wow.png/image/view/templatetemplate v-slot:endview stylebackground-color: #1BA035; height: 100%; display: flex; justify-content: center; align-items: centerimage styleheight: 50rpx;width: 50rpx; src/static/smile.png/image/view/template/wo-slider/view/viewview styledisplay: flex; justify-content: center; align-items: center; padding: 10px;view stylewidth: 400rpx;view stylemargin-bottom: 10px; text-align: center;插槽滑道-成功态内容/viewwo-sliderslideFinishonFinishSuccess :round{show: true, style: 10rpx}template v-slot:isFinishedview styleheight: 100%;background-color: #65B58A; color: #fff; display: flex; justify-content: center;align-items: center;view{{content}}/view/view/template/wo-slider/view/viewview styledisplay: flex; justify-content: center; align-items: center; padding: 10px;view stylewidth: 400rpx;view stylemargin-bottom: 10px; text-align: center;插槽滑道-初始态内容/viewwo-slider slideFinishonFinish :round{show: true, style: 10rpx}template v-slot:initview stylebackground-color: #107BBA; color: #fff; height: 100%; display: flex; justify-content: center;align-items: center;滑动解锁大礼包/view/template/wo-slider/view/viewview styledisplay: flex; justify-content: center; align-items: center; padding: 10px;view stylewidth: 400rpx;view stylemargin-bottom: 10px; text-align: center;根据接口判断验证通过/viewwo-sliderslideFinishonFinishOne :round{show: true, style: 10rpx}template v-slot:isFinishedview :style{backgroundColor: loadingOne ? #709bff : signOne ? #65B58A : #ed9576} styleheight: 100%; color: #fff; display: flex; justify-content: center;align-items: center;view{{resOne}}/view/view/templatetemplate v-slot:beginview stylebackground-color: #E5673B; height: 100%; display: flex; justify-content: center; align-items: centerimage styleheight: 30rpx;width: 30rpx; src/static/arrow-double-right.png/image/view/templatetemplate v-slot:endview :style{backgroundColor: loadingOne ? #3370FF : signOne ? #1BA035 : #E23E31} style height: 100%; display: flex; justify-content: center; align-items: centerview classspinner v-ifloadingOneview classdouble-bounce1/viewview classdouble-bounce2/view/viewimage v-else styleheight: 30rpx;width: 30rpx; :srcsignOne ? successImg : closeImg/image/view/template/wo-slider/view/viewview styledisplay: flex; justify-content: center; align-items: center; padding: 10px;view stylewidth: 400rpx;view stylemargin-bottom: 10px; text-align: center;根据接口判断验证失败/viewwo-sliderslideFinishonFinishTwo :round{show: true, style: 10rpx}template v-slot:isFinishedview :style{backgroundColor: loading ? #709bff : sign ? #65B58A : #ed9576} styleheight: 100%; color: #fff; display: flex; justify-content: center;align-items: center;view{{res}}/view/view/templatetemplate v-slot:beginview stylebackground-color: #E5673B; height: 100%; display: flex; justify-content: center; align-items: centerimage styleheight: 50rpx;width: 50rpx; src/static/right.png/image/view/templatetemplate v-slot:endview :style{backgroundColor: loading ? #3370FF : sign ? #1BA035 : #E23E31} style height: 100%; display: flex; justify-content: center; align-items: centerview classspinner v-ifloadingview classdouble-bounce1/viewview classdouble-bounce2/view/viewimage v-else styleheight: 50rpx;width: 50rpx; :srcsign ? successImg : closeImg/image/view/template/wo-slider/view/viewview stylepadding-top: 100rpx;button clickclickEvent重置/button/view/view
/templatescriptimport refreshImg from ../../static/refresh.pngimport closeImg from ../../static/close.pngimport successImg from ../../static/select-bold.pngexport 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)}}}
/scriptstyle.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
