vue实现移动端原生小球滑块 vue实现移动端原生小球滑块

本文实例为大家分享了vue实现移动端原生小球滑块的具体代码，供大家参考，具体内容如下
效果

文章图片

用到的一些事件
阻止默认事件：ev.preventDefault && ev.preventDefault();
获取宽度：getBoundingClientRect().width
点击位置在元素的位置：ev.changedTouches[0].pageX

css样式

.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); }}

【vue实现移动端原生小球滑块】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。