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. odoo中的字段创建后,不可以编辑

  2. 学习ASP.NET Core Blazor编程系列二十三——登录(2)

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  3. 行为型模式 - 命令模式Command

    模式的定义与特点 命令模式(Command Pattern),是将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化.命令模式是把发出命令的责任和执行命令的责任分割开,委派给不同的对象. ...

  4. 3DText无法被物体遮挡 - 解决

    目录 开篇: 问题复现: 如何解决: 1.创建一个Shader 2.创建一个Material 3.给Material赋值字体 4.给3DText属性赋值 5.查看效果 希望大家:点赞,留言,关注咯~ ...

  5. 10月25日内容总结——正则表达式相关知识与re模块

    目录 一.正则表达式前戏 二.正则表达式内容介绍 1.字符组 2.特殊符号 3.量词 4.贪婪匹配与非贪婪匹配 贪婪匹配 非贪婪匹配 5.转义符 6.正则表达式实战建议与一些例子 建议 例子 三.re ...

  6. 【Vue】计算属性 监听属性 组件通信 动态组件 插槽 vue-cli脚手架

    目录 昨日回顾 1 计算属性 插值语法+函数 使用计算属性 计算属性重写过滤案例 2 监听属性 3 组件介绍和定义 组件之间数据隔离 4 组件通信 父子通信之父传子 父子通信之子传父 ref属性 扩展 ...

  7. PHY状态机分析

    PHY的12种状态 enum phy_state { PHY_DOWN = 0, //关闭网卡 PHY_STARTING, //PHY设备准备好了,PHY driver尚为准备好 PHY_READY, ...

  8. 2022 CSP-S 游记

    \(9.26\):开坑. 没报 J 组主要是因为 J 比较垃圾,去抢小朋友的一等没什么意思. 初赛 刚拿到试卷就直接懵了,这 tm 是给人做的题?宇宙射线是什么奇妙东西,还有基数排序我根本不会啊,这个 ...

  9. 题解 [ZJOI2007]棋盘制作

    把悬线法这个坑填了,还是很简单的 qwq. 悬线法一般解决有一定约束条件的最大矩形问题.悬线的定义是从一个点一直往上走直到边界或者不符合条件结束. 炒个例子,在这题里面比如说有这样一个矩形 0 1 0 ...

  10. 跳板攻击之:Netsh端口代理转发

    跳板攻击之:Netsh端口代理转发 目录 跳板攻击之:Netsh端口代理转发 1 命令解析 2 代理转发内网22端口 3 代理转发外网4444端口 4 注意 1 命令解析 netsh interfac ...