vue实现移动端原生小球滑块
作者:至_臻
这篇文章主要为大家详细介绍了vue实现移动端原生小球滑块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。