本文实例为大家分享了vue实现移动端原生小球滑块的具体代码，供大家参考，具体内容如下
效果
用到的一些事件
阻止默认事件：ev.preventDefault && ev.preventDefault();
获取宽度：getBoundingClientRect().width
点击位置在元素的位置：ev.changedTouches[0].pageX
<template> <div id="app"> <div class="slider"> <div class="line"></div> <div class="line ac"></div> <div class="box" @touchstart="fnStart"></div> <div class="box as" @touchstart="fnStart"></div> </div> </div> </template>
js
<script>
export default {
methods: {
fnStart(ev) {
// 计算点击位置在元素的坐标
this.disX = ev.changedTouches[0].pageX - ev.target.offsetLeft;
// 获取父节点
this.parent = ev.target.parentNode;
// 获取元素的宽
this.ow = this.parent.getBoundingClientRect().width;
// 计算除了元素的宽盒子还剩下多宽
this.clienw = this.ow - ev.target.getBoundingClientRect().width;
// 获取左边小圆球
this.lcircle = this.parent.children[2];
// 获取右边小圆球
this.rcircle = this.parent.children[3];
// 获取变色条
this.line = this.parent.children[1];
document.ontouchmove = this.fnmove;
document.ontouchend = this.fnend;
},
fnmove(ev) {
// 计算移动的距离
this.ll = ev.changedTouches[0].pageX - this.disX;
// 判断不能让小圆球到盒子外面
if (this.ll < 0) this.ll = 0;
if (this.ll > this.clienw) this.ll = this.clienw;
// 右边线条
if (ev.target.className.indexOf("as") != -1) {
this.line.style.width =this.ll - this.parent.children[2].offsetLeft "px";
// 右边推动左边小圆球
// 判断如果右边小球移动到左边小于左边小球offsetLeft的距离 如果当前为0 加一个小圆球的宽他们就不会重叠
console.log(this.ll)
if (this.ll < this.lcircle.offsetLeft 30) {
// 如果this.ll大于左边小球的值 当前this.ll-30就是左边小球left的值
this.ind = this.ll - 30;
console.log(this.ind)
// 判断当前左边位置过等于0 就让他左边的位置等于0 就不会到盒子外面
if (this.ind <= 0) {
this.ind = 0;
}
// 如果this.ll的值小于小圆球的宽 两个圆就会重叠 所以让右边圆的left值为30
if (this.ll < 30) {
this.ll = 30;
}
this.line.style.left = this.ind "px";
this.lcircle.style.left = this.ind "px";
}
} else {
// 左线条
// 获取左边的距离
this.line.style.left = this.ll "px";
// 当前this.ll就是line多出来的宽 如果左边不动 offsetleft的值是300 this.ll是移动的距离
this.line.style.width =
this.parent.children[3].offsetLeft - this.ll "px";
// 左边推动右边小圆球 要把右边小球 30 不然两个小球就会重合到一起
if (this.ll 30 > this.rcircle.offsetLeft) {
this.indX = this.ll 30;
if (this.indX > this.clienw) {
this.indX = this.clienw;
}
// 判断当前移动的距离不能超过 this.clienw-30如果超过就会重叠
if(this.ll>this.clienw-30){
this.ll=this.clienw-30
}
this.line.style.left=this.indX 'px'
this.rcircle.style.left=this.indX 'px'
}
}
ev.target.style.left = this.ll "px";
},
fnend() {
document.ontouchmove = null;
document.ontouchend = null;
},
},
};
</script>css样式
<style scoped lang="less">
.slider {
height: 30px;
width: 300px;
background: #999;
position: relative;
margin: auto;
.box {
width: 30px;
height: 30px;
border-radius: 50%;
background: pink;
position: absolute;
}
.box.as {
background: blueviolet;
right: 0;
}
// 线条
.line {
width: 300px;
height: 5px;
background: #eee;
position: absolute;
}
.line.ac {
background: rgb(247, 151, 25);
}
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。