The last part is the verification of the slider on the PC side. This article is written by myself on the mobile terminal. It can be tested on the ipad. It is similar to the previous article. However, there are more codes for judging whether it is the PC or the mobile terminal, and the corresponding events. It will be different.
//这是判断是啥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
}
},
Next is the vue code
<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>
The upper is the code for sliding on the mobile terminal
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;
}
},
Friends who have found a good way can discuss it together! ! !