解决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> 将会出现滚动 ...
随机推荐
- 今天学到的新知识--自己的电脑可以像Github Pages、码云 Pages一样发布静态资源
大佬教我的,感觉这个很神奇哦 假设下面这个路径是我的本地电脑静态资源路径 打开powershell窗口 然后按照下图的样子执行命令 复制网址就可以访问啦 然后可以通过 https://iplocati ...
- vh 存在问题?试试动态视口单位之 dvh、svh、lvh
大部分同学都知道,在 CSS 世界中,有 vw.vh.vmax.vmin 这几个与视口 Viewport 相关的单位. 正常而言: 1vw 等于1/100的视口宽度 (Viewport Width) ...
- 【推荐】MySQL数据库设计SQL规范
1 命名规范 1.[强制]库名.表名.字段名必须使用小写字母并采用下划线分割,禁止拼音英文混用:(禁用-,-相当于运算符) 2.[建议]库名.表名.字段名在满足业务需求的条件下使用最小长度: 如inf ...
- Quartz.Net源码Example之Quartz.Examples
Quartz.Examples 反射-Example批量执行 实现思路:定义一个统一的接口,需要实现的类全部实现该接口:通过反射获取实现该接口的实例并触发其中的方法. 定义统一的接口 // 所有要 ...
- RISC-V 平台移植 RTOS
ARM 上移植实时操作系统大家可能比较熟悉,且例程较多,对于 RISC-V 内核的 MCU,可能相对比较陌生.下面结合 WCH 的 CH32V103 和 CH32V307 两款芯片来详细说下针 ...
- sync.Once 使用及解析
目录 前言 1. sync.Once 简介 2. sync.Once 源码解析 2.1 为什么 done 作为第一个字段 2.2 Do 方法的实现细节 2.3 其他重要细节 3. sync.Once ...
- 构建api gateway之 负载均衡
什么是负载均衡 负载均衡,英文名称为Load Balance,其含义就是指将负载(工作任务)进行平衡.分摊到多个操作单元上进行运行 以下为几种负载均衡策略介绍 1.随机(Random) 大家很多时候说 ...
- Vite 配置别名 vue3 项目
官方文档还是有点难懂,然后点链接找到了 https://github.com/rollup/plugins/tree/master/packages/alias#entries // rollup.c ...
- mysql03-默认的几个数据库
https://blog.csdn.net/dj673344908/article/details/80482844 1.查看mysql默认的数据库 在安装好mysql后,登录mysql,执行语句:s ...
- Zstack迁移实战记录1
https://blog.csdn.net/weixin_43767046/article/details/113748775 这段时间除了那个重度烤机测试(上面链接),还在做另一件事,想再做一个服务 ...