vue实现移动端原生小球滑块
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家分享了vue实现移动端原生小球滑块的具体代码,供大家参考,具体内容如下
效果
用到的一些事件
阻止默认事件:ev.preventDefault && ev.preventDefault();
获取宽度:getBoundingClientRect().width
点击位置在元素的位置:ev.changedTouches[0].pageX
1 2 3 4 5 6 7 8 9 10 | < 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <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样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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> |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
关于Element-ui中table默认选中toggleRowSelection问题
这篇文章主要介绍了关于Element-ui中table默认选中toggleRowSelection问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08Vue3中使用Element Plus时el-icon无法显示的问题解决
我们的Vue前端一般都是用的ElementUI,其中按钮可能用到的比较多,官方里面有自带的一些默认图标,下面这篇文章主要给大家介绍了关于Vue3中使用Element Plus时el-icon无法显示的问题解决,需要的朋友可以参考下2022-03-03详解VS Code使用之Vue工程配置format代码格式化
这篇文章主要介绍了详解VS Code使用之Vue工程配置format代码格式化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-03-03vuex2中使用mapGetters/mapActions报错的解决方法
这篇文章主要介绍了vuex2中使用mapGetters/mapActions报错解决方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
最新评论