<template><div class="slide"><div class="content" ref="content"><div class="line" ref="line"></div><!-- 第一個圓 --><div class="one" ref="one" @touchstart="Fnstart"></div><!-- 第二個圓 --><div class="one ac" ref="two" @touchstart="Fnstart"></div></div></div> </template><script> // @ is an alias to /srcexport default {data() {return {};},methods: {Fnstart(e) {this.startx = e.changedTouches[0].pageX - e.target.offsetLeft;this.one = this.$refs["one"];this.two = this.$refs["two"];this.content = this.$refs["content"];document.ontouchmove = this.Fnmove;document.ontouchend = this.FnEnd;},Fnmove(e) {this.X = e.changedTouches[0].pageX - this.startx;if (this.X < 0) this.X = 0;if (this.X > this.content.offsetWidth )this.X = this.content.offsetWidth ;e.target.style.left = this.X + "px";this.$refs["line"].style.left = this.one.offsetLeft + "px";this.$refs["line"].style.width =this.two.offsetLeft - this.one.offsetLeft + "px";if (e.target.className.indexOf("ac") == -1) {if (this.one.offsetLeft + e.target.offsetWidth >= this.two.offsetLeft) {if (this.X > this.content.offsetWidth - e.target.offsetWidth * 2)this.X = this.content.offsetWidth - e.target.offsetWidth * 2;this.one.style.left = this.X + "px";this.two.style.left = this.X+e.target.offsetWidth + "px";}}if (e.target.className.indexOf("ac") != -1) {if (this.two.offsetLeft - e.target.offsetWidth <= this.one.offsetLeft) {if (this.X < e.target.offsetWidth) this.X = e.target.offsetWidth;this.one.style.left = this.X - e.target.offsetWidth + "px";this.two.style.left = this.X + "px";}}},FnEnd() {document.ontouchmove = null;document.ontouchend = null;},}, }; </script> <style lang="less"> body {margin: 0; } .slide {.content {position: relative;width: 600px;height: 3px;background: #ebedf0;top: 200px;left: 0;margin: auto;.line {position: absolute;width: 600px;height: 5px;background: #1989fa;top: 0;left: 0;margin: auto;}// 第一個圓.one {position: absolute;top: 50%;left: 0;margin-top: -20px;width: 40px;height: 40px;border-radius: 50%;background: #fff;box-shadow: 0 1px 2px rgb(0, 0, 0, 0.5);.tips {position: absolute;left: 8px;margin-top: 50px;color: #1989fa;font-size: 20px;}}// 第二個圓.one {position: absolute;top: 50%;left: 0;margin-top: -20px;width: 40px;height: 40px;border-radius: 50%;background: #fff;box-shadow: 0 1px 2px rgb(0, 0, 0, 0.5);}.one.ac {left: 560px;background: #fff;}} } </style>

總結(jié)

以上是生活随笔為你收集整理的vue的小球碰撞的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。