Vue+element table+原生js +touch触摸事件实现移动端横向拖动

前端小白记录2023-07-21 11:57

Vue+element table+原生js +touch触摸事件实现移动端横向拖动

今天做移动端项目时，想加个表格展示数据，但是调试的时候发现，表格数据很多时，想要触屏左右滑动内容，但是滑动不了，又不想引用插件实现，只好自己写个拖拽事件了

javascript 复制代码

  <el-card
              shadow="never"
              v-show="tableCardTitle"
              class="table-wrapper"
             
            >
              <div slot="header" class="clearfix">
                <span>{{ tableCardTitle }}</span>
              </div>
              <el-table :data="tableData" stripe >
                <el-table-column
                  :prop="item.key"
                  :label="item.name"
                  v-for="(item, index) in tableLabel"
                  :key="index"
                >
                </el-table-column>
              </el-table>
            </el-card>

javascript 复制代码

 updated() {
 this.addrag();
}
 methods: {
  addDrag() {
      const tableWrapperEls = document.querySelector(".el-card__body");
      console.log(tableWrapperEls);
      const tableEls = document.querySelector(
        ".el-table--scrollable-x .el-table__body-wrapper"
      );
      console.log(tableEls);

      let isDragging = false; // 是否正在拖动
      let startX = 0; // 拖动开始的X坐标
      let scrollLeft = 0; // 横向滚动的距离

      tableWrapperEls.addEventListener("touchstart", (e) => {
        isDragging = true;
        startX = e.touches[0].pageX - tableWrapperEls.offsetLeft;
        scrollLeft = tableEls.scrollLeft;
      });

      tableWrapperEls.addEventListener("touchmove", (e) => {
        if (!isDragging) return;
        e.preventDefault();//阻止默认行为
        const x = e.touches[0].pageX - tableWrapperEls.offsetLeft;
        const walk = (x - startX) * 2; // 控制拖动速度
        tableEls.scrollLeft = scrollLeft - walk;
      });

      tableWrapperEls.addEventListener("touchend", () => {
        isDragging = false;
      });
    },
 }

javascript 复制代码

<style scoped>
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
</style>