Vue.directive('dragsroll', {
bind (my_el) {
let elHeader = my_el.querySelector('div.ivu-table-header');
let el = my_el.querySelector('div.ivu-table-body');
elHeader.style.cursor = 'grab';
elHeader.onmousedown = function () {
let gapX = event.clientX;
let startX = elHeader.scrollLeft;
document.onmousemove = function (e) {
let x = e.clientX - gapX;
el.scrollLeft = startX - x;
return false;
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
})

 注册全局自定义指令,然后再i-table中调用即可

解决iview拖动头部横向滚动问题的更多相关文章

  1. 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  2. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  3. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  4. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

  5. 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView

    李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView 11111222

  6. 李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView

    李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView (VTmagic是一个实现左右滚动的控制器的框架,也可以实现此功能) 实现的效果:  01 - 创建四个控制器 02 - 定义需要 ...

  7. 李洪强实现横向滚动的View<二>

    上一节中我们已经实现了一个带有图片,标题和价格label 的UIView 这节我们用这个view实现一个横向滚动的UIcollectionView 实现的效果如下:  01 - 创建CFTyreScr ...

  8. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  9. Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》

    Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...

  10. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

随机推荐

  1. 今天学到的新知识--自己的电脑可以像Github Pages、码云 Pages一样发布静态资源

    大佬教我的,感觉这个很神奇哦 假设下面这个路径是我的本地电脑静态资源路径 打开powershell窗口 然后按照下图的样子执行命令 复制网址就可以访问啦 然后可以通过 https://iplocati ...

  2. vh 存在问题?试试动态视口单位之 dvh、svh、lvh

    大部分同学都知道,在 CSS 世界中,有 vw.vh.vmax.vmin 这几个与视口 Viewport 相关的单位. 正常而言: 1vw 等于1/100的视口宽度 (Viewport Width) ...

  3. 【推荐】MySQL数据库设计SQL规范

    1 命名规范 1.[强制]库名.表名.字段名必须使用小写字母并采用下划线分割,禁止拼音英文混用:(禁用-,-相当于运算符) 2.[建议]库名.表名.字段名在满足业务需求的条件下使用最小长度: 如inf ...

  4. Quartz.Net源码Example之Quartz.Examples

    Quartz.Examples 反射-Example批量执行 ​ 实现思路:定义一个统一的接口,需要实现的类全部实现该接口:通过反射获取实现该接口的实例并触发其中的方法. 定义统一的接口 // 所有要 ...

  5. RISC-V 平台移植 RTOS

        ARM 上移植实时操作系统大家可能比较熟悉,且例程较多,对于 RISC-V 内核的 MCU,可能相对比较陌生.下面结合 WCH 的 CH32V103 和 CH32V307 两款芯片来详细说下针 ...

  6. sync.Once 使用及解析

    目录 前言 1. sync.Once 简介 2. sync.Once 源码解析 2.1 为什么 done 作为第一个字段 2.2 Do 方法的实现细节 2.3 其他重要细节 3. sync.Once ...

  7. 构建api gateway之 负载均衡

    什么是负载均衡 负载均衡,英文名称为Load Balance,其含义就是指将负载(工作任务)进行平衡.分摊到多个操作单元上进行运行 以下为几种负载均衡策略介绍 1.随机(Random) 大家很多时候说 ...

  8. Vite 配置别名 vue3 项目

    官方文档还是有点难懂,然后点链接找到了 https://github.com/rollup/plugins/tree/master/packages/alias#entries // rollup.c ...

  9. mysql03-默认的几个数据库

    https://blog.csdn.net/dj673344908/article/details/80482844 1.查看mysql默认的数据库 在安装好mysql后,登录mysql,执行语句:s ...

  10. Zstack迁移实战记录1

    https://blog.csdn.net/weixin_43767046/article/details/113748775 这段时间除了那个重度烤机测试(上面链接),还在做另一件事,想再做一个服务 ...