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. (18)go-micro微服务ELK介绍

    目录 一 什么是ELK 二 Beats的六种工具 三 ELK系统的特点 四 ELK+beats系统架构 五 ELK优点 六 最后 一 什么是ELK ELK是三个[开源软件]的缩写,分别表示:Elast ...

  2. Codeforces Round #846 (Div. 2) A-E

    比赛链接 A 题意 给 \(n\) 个正整数,找到三个数,使得他们的和为奇数,输出他们的下标. 题解 知识点:贪心. 找到三个奇数或者一个奇数两个偶数即可,其他情况无解. 时间复杂度 \(O(n)\) ...

  3. 数据湖Hudi与对象存储Minio及Hive\Spark\Flink的集成

    本文主要记录对象存储组件Minio.数据湖组件Hudi及查询引擎Hive\Spark之间的兼容性配置及测试情况,Spark及Hive无需多言,这里简单介绍下Minio及Hudi. MinIO 是在 G ...

  4. Vue3 企业级优雅实战 - 组件库框架 - 10 实现组件库 cli - 下

    上文创建了一堆 utils.component-info,并实现了新组件模块相关目录和文件的创建.本文继续实现后面的内容. 1 组件样式文件并导入 在 src/service 目录中创建 init-s ...

  5. python自动发布-优化版本

    import sys import time import os import paramiko from pygments.lexers import shell baseconfig = { &q ...

  6. 线程基础知识10-volatile

    1 简介 Volatile保证了可见性和有序性,没有保证原子性. 1.1 保证可见性简介 可见性就是指当一个线程修改了共享变量的值时,其他线程能够立即得知这个修改.volatile变量做到了这一点. ...

  7. python_变量类型

    列表:用[]标识,可以用下标进行访问,可以更改值 List = [123,'book'] print List 元组:用()标识,可以用下标进行访问,但是不能更改元素值,相当于只读 tuple = ( ...

  8. while循环补充、for循环、range关键字、内置方法之整型、内置方法之浮点型、内置方法之字符串

    目录 一.while循环补充 (1).while+continue (2).while+else(了解) (3).死循环 二.for循环 range关键字 for+break for+continue ...

  9. LeetCode 39. 组合总和 40.组合总和II 131.分割回文串

    欢迎关注个人公众号:爱喝可可牛奶 LeetCode 39. 组合总和 40.组合总和II 131.分割回文串 LeetCode 39. 组合总和 分析 回溯可看成对二叉树节点进行组合枚举,分为横向和纵 ...

  10. 3D模型在线查看工具

    3D场景工具推荐:NSDT场景编辑器. glTF Viewer 2.0是一个可以在线查看GLTF格式3D模型的,可以对模型进行显示设置.灯光设置来查看模型效果,除此之外还可以对模型进行性能分析和模型验 ...