vue 小球滑动交叉

最新推荐文章于 2022-09-01 10:33:32 发布

初夏七鹿

最新推荐文章于 2022-09-01 10:33:32 发布

阅读量199

点赞数 1

本文链接：https://blog.csdn.net/m0_58875967/article/details/119857178

版权

本文通过实例代码分享了Vue中创建小球滑动交叉的实现方法，直接展示了核心代码，帮助开发者快速理解并应用。

摘要由CSDN通过智能技术生成

废话不多说直接上代码！

<template>
  <div class="about">
    <div class="box">
      <!-- 默认线 -->
      <div class="Line"></div>
      <!-- 蓝色的线 -->
      <div class="slider-Line" ref="slider-Line"></div>
      <!-- 左边小球 -->
      <div class="ball" @touchstart.prevent="fnstart"></div>
      <!-- 右边小球 -->
      <div class="ball ac" @touchstart.prevent="fnstart"></div>
      <!-- 上面的数字 -->
      <div class="num" ref="num">{
  { num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    fnstart(ev) {
      // 小球
      this.oDiv = ev.target;
      // pagx:鼠标点击的位置到页面最左边的距离            offsetLeft当前元素