基于vue transform: translateY 上下滑动实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

文章目录

• 前言
• 一、基于vue transform: translateY 上下滑动实现
• 二、使用步骤
• 总结

 

---

前言

提示：这里可以添加本文要记录的大概内容：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、基于vue transform: translateY 上下滑动实现？

javaScript -- touch事件详解（touchstart、touchmove和touchend）

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。

二、使用步骤

1.引入库

代码如下（示例）：

<div class="roll" id="category3">
            <ul class="header_nav_new" style="transform: translateY(0px);"
                id="box"
                ref="dragBox"
                @touchstart="touchstartHandle('dragBox',$event)"
                @touchmove="touchmoveHandle('dragBox',$event)"
                @touchend="toucendveHandle('dragBox',$event)">
              <li>
                <a class="J_ping" >111</a>
              </li>
            </ul>
</div>





 methods: {
    tz(){
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '',
        loadingType: 'spinner',
      });

      let second = 1;
      const timer = setInterval(() => {
        second--;
        if (second) {
          toast.message = ``;
        } else {
          clearInterval(timer);
          // 手动清除 Toast
          Toast.clear();
          this.$router.push('/camera')
        }
      }, 500);

    },
    onSearch(val) {
      Toast(val);
    },
    //开始拖动
    touchstartHandle(refName, e) {
      let element = e.targetTouches[0]
      // 记录点击的坐标
      this.coordinate.client = {
        x: element.clientX,
        y: element.clientY
      }
      // 记录需要移动的元素坐标
      this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
      this.coordinate.elePosition.top = this.$refs[refName].offsetTop
    },
    //正在拖动
    touchmoveHandle(refName, e) {
      let element = e.targetTouches[0]
      // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
      let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
      let divHg1 = document.getElementById("category3").clientHeight;
      let divHg = divHg1*1/3;
      // 限制可移动距离，不超出可视区域
      y = y >=0  ? 0 : y <= '-'+divHg  ? '-'+divHg  : y
      // 移动当前元素
      let ScaleNum = y + 'px'
      this.$refs[refName].style.transform = `translateY(${ScaleNum})`
    },
    //结束拖动
    toucendveHandle(refName, e){
      // let element = e.targetTouches[0]
      let element=document.defaultView.getComputedStyle(document.getElementById('box'),null).transform;
      let tanslateY = parseFloat(element.substring(6).split(',')[5]);
      let divHg = document.getElementById("box").clientHeight*1/3;
      if(tanslateY>0){
        let divHg = document.getElementById("box");
        let ScaleNum =0
        this.$refs[refName].style.transform = `translateY(${ScaleNum})`
      }
      if(tanslateY<divHg){
        let divHg = document.getElementById("box");
        let ScaleNum =0
        this.$refs[refName].style.transform = `translateY(${ScaleNum})`
      }
    },
},

 

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单基于vue transform: translateY 上下滑动实现的方法