解决iview拖动头部横向滚动问题
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拖动头部横向滚动问题的更多相关文章
- 解决iScroll横向滚动区域无法拉动页面的问题
近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
- 一款兼容IE6并带有多图横向滚动的jquery特效
一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...
- 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView
李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView 11111222
- 李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView
李洪强iOS开发之后使用纯代码实现横向滚动的UIScrollView (VTmagic是一个实现左右滚动的控制器的框架,也可以实现此功能) 实现的效果: 01 - 创建四个控制器 02 - 定义需要 ...
- 李洪强实现横向滚动的View<二>
上一节中我们已经实现了一个带有图片,标题和价格label 的UIView 这节我们用这个view实现一个横向滚动的UIcollectionView 实现的效果如下: 01 - 创建CFTyreScr ...
- js实现文字横向滚动
页面布局 <div id="scroll_div" class="fl"> <div id="scroll ...
- Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》
Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...
- 使用elementUI滚动条之横向滚动
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...
随机推荐
- NodeJS 实战系列:如何设计 try catch
本文将通过一个 NodeJS 程序里无效的错误捕获示例,来讲解错误捕获里常见的陷阱.错误捕获不是凭感觉添加 try catch 语句,它的首要目的是提供有效的错误排查信息,只有精心设计的错误捕获才有可 ...
- 聊聊JUC包下的底层支撑类-AbstractQueuedSynchronizer(AQS)
聊聊JUC包下的底层支撑类-AbstractQueuedSynchronizer(AQS) juc包下的一堆并发工具类是我们日常开发特别是面试中常被拿来问的八股文之一,为了工作也好,为了面试也罢,今天 ...
- 12月9日内容总结——静态文件以及配置、form表单属性的作用、request对象、python连接数据库和Django连接数据库、ORM的基础知识介绍
目录 一.静态文件 1.静态文件概念 2.资源访问 3.静态文件资源访问 二.静态文件相关配置 1.接口前缀 2.接口前缀动态匹配 三.form表单 action属性 method属性 四.reque ...
- ATM项目开发
目录 一.项目开发流程 1.项目需求分析: 2.项目架构设计: 3.项目分组开发: 4.项目提交测试: 5.项目交付上线: 二.项目需求分析 1.主题 2.项目核心 3.项目需求: 4.从需求中提炼出 ...
- @RestControllerAdvice全局异常统一处理
spring项目中,我们通常规定了返回的格式(成功-失败-异常),特别是异常怎么处理方便呢? 1.自定义状态码实体 package com.ruoyi.common.constant; /** * 返 ...
- PowerToys 微软效率工具包 使用教程
今天给大家介绍一款 非常实用的微软工具包 里面包含 快捷键的使用 颜色选择器 键盘管理器 屏幕标尺 鼠标实用工具等众多高效工作的功能 还是蛮出彩的 下载 PowerToys⇲ 安装教程 1.双击文件运 ...
- .NET List集合对比差异,Get,Post请求
1.键值排序 Dictionary<int, List<string>> dic = new Dictionary<int, List<string>> ...
- .net core 阿里云接口之拷贝文件
紧接上文, 1).net core 阿里云接口之获取临时访问凭证_SunshineGGB的博客-CSDN博客 2).net core 阿里云接口之将指定的OSS文件下载到流_SunshineGGB的博 ...
- CSS常用属性(3)
(9) list-style(列表样式) 类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roma ...
- kali linux 使用教程
kali linux使用教程 前言:Kali Linux 是专门用于渗透测试的linux操作系统,它由BackTrack发展而来,在整合了IWHAX.WHOPPIX和Auditor这三种渗透测试专用L ...