html 部分
<template>
<div class="about">
<div class="box">
<!-- 右边小球 -->
<div class="ball ac" @touchstart.prevent="fnstart"></div>
<!-- 左边小球 -->
<div class="ball" @touchstart.prevent="fnstart"></div>
<!-- 默认线 -->
<div class="Line"></div>
<!-- 蓝色的线 -->
<div class="Line ac" ref="slider-Line"></div>
</div>
</div>
</template>
JavaScript 部分
<script>
export default {
data(){
return{}
},
methods:{
fnstart(ev){
this.oDiv=ev.target
this.pageX=ev.changedTouches[0].pageX-this.oDiv.offsetLeft
// 父元素的宽度
this.parent=ev.target.parentNode.offsetWidth
// 减去小球的宽度
this.width=this.parent-ev.target.offsetWidth
this.parents = ev.target.parentNode;
document.ontouchmove=this.FnMove
document.ontouchend=this.FnEnd
},
FnMove(ev){
this.X=ev.changedTouches[0].pageX-this.pageX
if(this.X<0)this.X=0
if(this.X>this.width)this.X=this.width
this.$refs['slider-Line'].style.width=this.X+'px'
// 右边小球 向左推
if(ev.target.className.indexOf('ac')!=-1){
this.$refs['slider-Line'].style.width=this.X-this.parents.children[1].offsetLeft+'px'
this.pullL=this.X-30
if(this.X<this.parents.children[1].offsetLeft+30){
if(this.pullL<0)this.pullL=0
if(this.X<this.parents.children[1].offsetLeft+30)this.X=this.parents.children[1].offsetLeft+30
this.parents.children[1].style.left=this.pullL+'px'
this.parents.children[3].style.left=this.pullL+'px'
}
}
// 左边小球 向右推
if(ev.target.className.indexOf('ac')==-1){
this.$refs['slider-Line'].style.left=this.X+'px'
this.$refs['slider-Line'].style.width=this.parents.children[0].offsetLeft-this.X+'px'
this.pullR=this.X+30
if(this.X>this.parents.children[0].offsetLeft-30){
if(this.pullR>this.width)this.pullR=this.width
if(this.X>this.parents.children[0].offsetLeft-30)this.X=this.parents.children[0].offsetLeft-30
this.parents.children[0].style.left=this.pullR+'px'
}
}
this.oDiv.style.left=this.X+'px'
},
FnEnd(){
document.ontouchmove=null
document.ontouchend=null
}
}
}
</script>
css样式部分
<style lang="less" scoped>
.box {
position: relative;
width: 400px;
height: 30px;
background-color: rgb(240, 16, 83);
top: 50px;
margin: auto;
.ball {
position: absolute;
width: 30px;
height: 30px;
background-color: pink;
border-radius: 50%;
z-index: 2;
}
.ball.ac {
right: 0;
background-color: purple;
}
.Line {
position: absolute;
top: 14px;
width: 400px;
height: 2px;
background-color: blue;
line-height: 30px;
}
.Line.ac {
background: #ccc;
}
}
</style>