上篇是pc端的滑块验证,这篇是我自己写的移动端的,亲测在ipad上可以,跟上篇差不多,但是在这篇里多了判断是pc端还是移动端的代码,相应的事件也会不一样。
//这是判断是啥pc还是移动端的方法
os(){
var ua = navigator.userAgent,
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isPc = !isPhone && !isAndroid && !isSymbian;
if(isTablet){
return 'Tablet'
}else if(isPc){
return 'pc'
}
},
created(){
if(this.os()=='Tablet'){
this.isPC = false
}else if(this.os()=='pc'){
this.isPC = true
}
},
接下来是vue代码
<template>
<div class="jc-component__range">
<div class="jc-range" :class="rangeStatus?'success':''" >
<i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon" v-if="isPC"></i>
<i @touchstart="rangeMoveIpad" :class="rangeStatus?successIcon:startIcon" v-else></i>
{
{
rangeStatus?successText:startText}}
</div>
</div>
</template>
鞋面是移动端滑动的代码
rangeMoveIpad(e){
let ele = e.target;
let startX = e.changedTouches[0].clientX;
let eleWidth = ele.offsetWidth;
let parentWidth = ele.parentElement.offsetWidth;
let MaxX = parentWidth - eleWidth;
if(this.rangeStatus){
//不运行
return false;
}
document.ontouchmove = (e) => {
let endX = e.changedTouches[0].clientX;
this.disX = endX - startX;
if(this.disX<=0){
this.disX = 0;
}
if(this.disX>=MaxX-eleWidth){
//减去滑块的宽度,体验效果更好
this.disX = MaxX;
}
ele.style.transition = '.1s all';
ele.style.transform = 'translateX('+this.disX+'px)';
e.preventDefault();
}
document.ontouchend = ()=> {
if(this.disX !== MaxX){
ele.style.transition = '.1s all';
ele.style.transform = 'translateX(0)';
//执行失败的函数
this.errorFun && this.errorFun();
}else{
this.rangeStatus = true;
if(this.status){
this.$parent[this.status] = true;
}
//执行成功的函数
this.successFun && this.successFun();
}
document.ontouchmove = null;
document.ontouchend = null;
}
},
又发现好方法的小伙伴可以一起讨论哦!!!