<template> <view :data-theme="theme"> <view class="move-path bg-color" @touchend="handleOnTouchEnd" @touchstart="start"> <view class="move-content"> <view v-if="vertify" class="success">{{this.tipWords}}</view> <view v-else>拖动滑块验证</view> </view> <movable-area :animation="true"> <movable-view class="move-view" :x="x" direction="horizontal" @change="handleOnMoving" :disabled="vertify" :class="{'active':vertify}"></movable-view> </movable-area> </view> </view> </template> <script> let app = getApp(); export default { name: 'move-vertify', data() { return { x: 0, oldx: 0, vertify: false, size: {}, isMove: false, tipWords: '', // 提示语 startMoveTime: "", //移动开始的时间 endMovetime: '', //移动结束的时间 theme: app.globalData.theme, }; }, mounted() { this.init() }, methods: { //鼠标按下 start: function(e) { this.startMoveTime = new Date().getTime(); },//开始滑动的时间 //鼠标松开 end: function() { this.endMovetime = new Date().getTime(); }, init() { this.getSize(".move-path").then((pathway) => { this.size.pathway = pathway; this.getSize(".move-view").then((track) => { this.size.track = track; }); }) }, /** * 获取元素宽度 */ getSize(selector) { return new Promise((resolve, reject) => { const view = uni.createSelectorQuery().in(this).select(selector); view.fields({ size: true, }, (res) => { resolve(res.width); }).exec(); }); }, /** * 滑动过程 */ handleOnMoving(e) { this.oldx = e.detail.x; }, /** * 滑动结束 */ handleOnTouchEnd() { this.endMovetime = new Date().getTime(); if (this.vertify || this.oldx < 1) return; this.x = this.oldx; if ((this.oldx + 2) > (this.size.pathway - this.size.track)) this.vertify = true; else { this.$nextTick(() => { this.x = 0; this.oldx = 0; }); } this.tipWords =`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`; setTimeout(() => { this.$emit("vertify", this.vertify); }, 1000) }, } } </script> <style scoped lang="scss"> .move-path { margin: 20rpx auto; color: #333; height: 80rpx; border-radius: 80rpx; position: relative; overflow: hidden; .move-content { position: absolute; top: 0; left: 0; width: 100%; line-height: 80rpx; text-align: center; color: #fff; font-size: 32rpx; z-index: 3; .success { color: #fff; } } movable-area { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: none; z-index: 5; } movable-view { width: 120rpx; height: 80rpx; box-sizing: border-box; border-radius: 80rpx; background-color: #fff; @include coupons_border_color(theme); background-position: center; background-repeat: no-repeat; background-size: auto 32rpx; background-image: url('./arrow.png'); } movable-view.active { background-size: 30% 30%; background-image: url('./success.png'); } } </style>