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

这篇具有很好参考价值的文章主要介绍了Vue+element table+原生js +touch触摸事件实现移动端横向拖动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

今天做移动端项目时,想加个表格展示数据,但是调试的时候发现,表格数据很多时,想要触屏左右滑动内容,但是滑动不了,又不想引用插件实现,只好自己写个拖拽事件了文章来源地址https://www.toymoban.com/news/detail-582120.html

  <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>
 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;
      });
    },
 }
<style scoped>
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
</style>

到了这里,关于Vue+element table+原生js +touch触摸事件实现移动端横向拖动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】Vue 使用 Print.js 打印选中区域的html,用到的是Element ui table表格,解决页面样式不出现或者table表格样式错乱问题!!!

    需求 : 打击打印按钮,文字内容以及表格中的内容 解决方案 加上这句就好了!完美! 一、因为表格数据过多,之前加了表格滚动条,但是打印出来 会把表格上的滚动条也打印出来,所以这里改成了 给弹框加滚动条,去掉表格中的滚动条 2.1 原因: table-layout: fixed导致的,

    2024年02月09日
    浏览(70)
  • vue element-table(树形结构),实现同级拖动排序

    ####需求:树形结构的table需要实现同级拖拽排序 1.vue引用sortablejs 参考相关配置http://www.sortablejs.com/options.html 2.定义变量 3.初始化created中调用方法,方法如下 4.扁平化数据方法 5.犹豫这个过程中需要子级存在父级的parentId,自己把扁平化的方法改造了一下,在查询完列表数据时

    2024年02月14日
    浏览(41)
  • 前端vue3+element plus 分页table排序功能实现

    我有如下所示的一个table,数据data是一个computed计算属性,一般情况下筛选使用element的sortable属性就可以了,可查看Element - The world\\\'s most popular Vue UI framework 但我的 table 是一个分页的 table ,当我使用 sortable 时发现,它只是对当前页的数据进行排序,但这并不是我需要的,我的

    2024年02月14日
    浏览(52)
  • Vue+element实现el-table行内编辑并校验

    el-table行内编辑情况情况概要:之前在开发过程中对于element数据的新增,修改,删除。一般直接结合el-form使用。也就是新增的时候点新增然后出来一个弹框,里面嵌套一个表单,然后保存就好了。这次项目中要求所有的新增,修改,删除功能加在表格中,实现行内编辑功能。

    2024年02月15日
    浏览(47)
  • element table 点击按钮 表格滚动条移动

    需求场景:表格列数很多的情况下,不想拖拽滚动条查看明细,所以点击按钮直接跳转到对应的位置 代码实现: 关键代码:

    2024年02月20日
    浏览(36)
  • 原生js实现网页淘宝产品展示效果,鼠标移入小图展示对应大图(事件委托、事件传播、冒泡机制)【含完整代码】

    淘宝网页产品展示模块如下: 当鼠标移入小图,在上方会相应地展示大图 当鼠标移入小图,在上方会相应地展示大图;且当鼠标移出,图片停留在移入时显示的图片,不会改变。 本文实现效果如下(鼠标移入即改变,不用点击): 定义图片列表,为列表添加鼠标移入事件

    2024年02月07日
    浏览(42)
  • vue element ui table表格--实现列的显示与隐藏

    实现效果 提示:代码段太简单就不解释了,自己看代码自己更改,下面代码直接无脑复制更改就行

    2024年02月02日
    浏览(51)
  • Vue3+element plus+sortablejs实现table列表拖拽

    1、安装 2、引入 3、使用 表格表头必须加 row-key ,否则会出现排序错乱 完整代码 table.vue

    2024年02月07日
    浏览(52)
  • element ui table某个单元格添加点击事件

    1.创建表格 el-table ref=\\\"multipleTable\\\" :data=\\\"tableData\\\" border el-table-column fixed type=\\\"selection\\\" align=\\\"center\\\"/el-table-column div v-for=\\\"(item,index) in columns\\\" :key=\\\"index\\\" el-table-column :prop=\\\"item.prop\\\" :label=\\\"item.label\\\" :formatter=\\\"item.formatter\\\" align=\\\"center\\\" show-overflow-tooltip /el-table-column /div /el-table 2.创建表头+事件 

    2024年02月17日
    浏览(44)
  • Vue 中 element-ui table 结合后端请求实现排序

    一.需求 需要对指定列,结合后端请求进行排序 二.效果 三.知识点 3.1 如果需要结合后端请求排序,将需要排序的列上设置sortable为custom 3.2 同时在el-table标签上监听sort-change事件,在事件回调中可以获取当前排序列的字段名和排序顺序,从而将这些作为发起接口请求的入参 3

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包